Bootstrap 工具提示不起作用

Question

我的 bootstrap 工具提示无法正常工作，我几乎尝试了所有方法，多个 jQuery 版本，多个 bootstrap 版本，多个代码片段（经常看到在 Whosebug 上的类似问题），javascript 在头上和 body 之后，似乎没有任何工作......

这是我当前的代码：

<!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 加载之前使用它。

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

Uncaught ReferenceError: $ is not defined

要解决此问题，请将您的 script 标记 移到 jQuery 库和 Bootstrap JS 之后：

<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>

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

你这里有 2 个问题：

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 工具提示不起作用

Bootstrap Tooltips Not Working

javascript

jquery

html

tooltip