Bootstrap 3.0 Popovers和工具提示

Question

我是Bootstrap的新手，我無法使用popover和tooltip功能。 我對下拉和模型沒有任何問題，但我似乎錯過了popover和工具提示的東西。

我正在獲取工具提示以顯示但它們沒有樣式，並且像引導示例一樣定位。 並且popover根本不工作。

請看一下，讓我知道我錯過了什么。

       <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
        <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
        <link href="css/index.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
       <p id="tool"class="muted" style="margin-bottom: 0;">
        Tight pants next level keffiyeh
        <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
       <h3>Live demo</h3>
        <div style="padding-bottom: 24px;">
          <a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript">
            $(document).ready(function() {

                $('.tool').tooltip();
                $('.btn').popover();

            }); //END $(document).ready()

        </script>

        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>

      </body>

    </html>

Answer 1

我在所有頁面上都使用它來啟用工具提示

$(function () { $("[data-toggle='tooltip']").tooltip(); });

Answer 2

事實證明， Evan Larsen有最好的答案。 請upvote他的答案（和/或選擇它作為正確答案） - 它很棒。

在這里工作jsFiddle

使用Evan的技巧，您可以使用一行代碼實例化所有工具提示：

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

您將看到長段落中的所有工具提示都只有一行的工作提示。

在jsFiddle示例（上面的鏈接）中，我還添加了一個默認情況下一個工具提示（通過登錄按鈕）為ON的情況。 此外，工具提示代碼添加到jQuery中的按鈕，而不是HTML標記。

Popovers 做的工作一樣的工具提示：

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

你有它！ 終於成功了。

解決這個問題的最大問題之一是使用jsFiddle進行引導工作......這是你必須做的事情：

從這里獲取Twitter Bootstrap CDN的參考： http ： //www.bootstrapcdn.com/
將每個鏈接粘貼到記事本中並除去URL以外的所有鏈接。 例如：
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
在jsFiddle，在左側，打開外部資源手風琴下拉列表
粘貼每個網址，每次粘貼后按加號
現在，打開“Frameworks＆Extensions”手風琴下拉列表，選擇jQuery 1.9.1（或其中任何一個......）

現在你准備好了。

Answer 3

使用BOOTSTRAP 3：簡短

檢查 - JS小提琴

HTML

<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>    
</div>

使用Javascript

$(function () { 
    $("[data-toggle='tooltip']").tooltip(); 
});

Answer 4

我必須在DOM上做好准備

$( document ).ready(function () { // this has to be done after the document has been rendered
    $("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips
    $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        'placement': 'top',
        'show': true
    });
});

並將我的加載訂單更改為：

jQuery的
jQuery UI
引導

Answer 5

出於某種原因，我能夠讓我的代碼工作的唯一方法是切換幾件事。 如果到目前為止沒有任何作用，請對此進行調整：

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});

Answer 6

您只需啟用工具提示：

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})

Answer 7

您的腳本中存在語法錯誤，並且如xXPhenom22Xx所述，您必須實例化工具提示。

<script type="text/javascript">

    $(document).ready(function() {

        $('.btn-danger').tooltip();

    }); //END $(document).ready()

</script>

請注意，我使用了你的班級“btn-danger”。 您可以創建不同的類，或使用id="someidthatimakeup" 。

Answer 8

如果您正在使用Rails和ActiveAdmin，這將是您的問題： https ： //github.com/seyhunak/twitter-bootstrap-rails/issues/450基本上，與active_admin.js沖突

這是解決方案： https ：//stackoverflow.com/a/11745446/264084（Karen的回答）tldr：將active_admin資產移動到“vendor”目錄中。

Bootstrap 3.0 Popovers和工具提示

問題描述

8 個解決方案

解決方案1
229 2013-08-23 20:47:54

解決方案2
146 已采納 2013-08-30 16:31:53

解決方案3
26 2014-01-12 09:59:07

使用BOOTSTRAP 3：簡短

解決方案4
6 2014-04-03 18:08:44

解決方案5
5 2014-09-08 20:21:30

解決方案6
0 2013-08-23 20:16:01

解決方案7
0 2013-08-23 20:23:08

解決方案8
0 2015-05-04 05:41:57

Bootstrap 3.0 Popovers和工具提示

問題描述

8 個解決方案

解決方案1 229 2013-08-23 20:47:54

解決方案2 146 已采納 2013-08-30 16:31:53

解決方案3 26 2014-01-12 09:59:07

使用BOOTSTRAP 3：簡短

解決方案4 6 2014-04-03 18:08:44

解決方案5 5 2014-09-08 20:21:30

解決方案6 0 2013-08-23 20:16:01

解決方案7 0 2013-08-23 20:23:08

解決方案8 0 2015-05-04 05:41:57

解決方案1
229 2013-08-23 20:47:54

解決方案2
146 已采納 2013-08-30 16:31:53

解決方案3
26 2014-01-12 09:59:07

解決方案4
6 2014-04-03 18:08:44

解決方案5
5 2014-09-08 20:21:30

解決方案6
0 2013-08-23 20:16:01

解決方案7
0 2013-08-23 20:23:08

解決方案8
0 2015-05-04 05:41:57