Bootstrap工具提示不起作用

Question

我無法使用我的引導工具提示，實際上我已經嘗試了所有方法，多個jQuery版本，多個引導程序版本，多個代碼段（在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：未定義$

為了解決這個問題，將你的script標簽jQuery庫和自舉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工具提示不起作用

問題描述

3 個解決方案

解決方案1
1 已采納 2015-12-29 00:15:21

解決方案2
1 2015-12-29 00:21:09

解決方案3
0 2015-12-29 00:24:11

Bootstrap工具提示不起作用

問題描述

3 個解決方案

解決方案1 1 已采納 2015-12-29 00:15:21

解決方案2 1 2015-12-29 00:21:09

解決方案3 0 2015-12-29 00:24:11

解決方案1
1 已采納 2015-12-29 00:15:21

解決方案2
1 2015-12-29 00:21:09

解決方案3
0 2015-12-29 00:24:11