Question

我无法让我的bootstrap工具提示工作，我已经尝试过几乎所有的东西，多个jQuery版本，多个bootstrap版本，多个代码片段（在stackoverflow上看到很多类似的问题），javascript在头上和之后身体似乎没什么用......

这是我目前的代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script>
            $(function(){
                $('[data-toggle=tooltip]').tooltip();
            });
        </script>
    </head>
    <body>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</html>

Answer 1

您正在尝试在加载之前使用jQuery。

如果查看控制台，您将看到错误：

未捕获的ReferenceError：describe("Current Angular UI router state", function () { beforeEach(function () { browser.get("https://angular-ui.github.io/ui-router/sample/#/"); }); it("should get the current state", function (){ var currentStateName = browser.executeAsyncScript(function(callback) { var el = document.querySelector("html"); // ng-app is defined on html element in this case var injector = angular.element(el).injector(); var service = injector.get('$state'); callback(service.current.name); }); expect(currentStateName).toEqual("home"); }); });未定义

要解决此问题，请在 jQuery库和Bootstrap JS之后移动$标记：

script

Answer 2

尝试以这种方式：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    </head>
    <body>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script>
            $(function(){
                $('[data-toggle=tooltip]').tooltip();
            });
        </script>
    </body>

</html>

Answer 3

你有两个问题：

1）首先初始化jquery

2）在工具提示初始化后插入了非法（不可见）字符。我知道这很糟糕，但你需要删除那个字符。

以下代码应该有效

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        $(function() {
            $('[data-toggle=tooltip]').tooltip();
        });
    </script>
</body>
</html>

Bootstrap工具提示不起作用

3 个答案: