Javascript Bootstrap 3.0弹出窗口和工具提示_Javascript_Jquery_Css_Twitter Bootstrap

Javascript Bootstrap 3.0弹出窗口和工具提示

javascript jquery css twitter-bootstrap

Javascript Bootstrap 3.0弹出窗口和工具提示,javascript,jquery,css,twitter-bootstrap,Javascript,Jquery,Css,Twitter Bootstrap,我刚开始使用Bootstrap，我很难让popover和工具提示功能正常工作。我对下拉列表和模型没有问题，但我似乎缺少了一些弹出窗口和工具提示我得到的工具提示显示出来，但他们不是样式和位置像引导的例子。而且爆米花根本不起作用请看一看，让我知道我错过了什么 <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title&g

我刚开始使用Bootstrap，我很难让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>


引导101模板

紧身裤下一关keffiyeh
我没听说过他们。照片亭比尔德粗斜纹棉布活版纯素信使袋stumptown。农场到餐桌seitan，mcsweeney的fixie可持续藜麦8位美国服装terry richardson乙烯基chambray。比尔德·斯顿普敦，羊毛衫banh mi lomo thundercats。豆腐生物柴油威廉斯堡马法，四罗科麦克斯威尼的清洁纯素香肠。一个真正具有讽刺意味的工匠，从scenester农场到餐桌的banksy Austin freegan cred生料牛仔布单一来源咖啡
现场演示
$（文档）.ready（函数（）{
$（'.tool'）.tooltip（）；
$（'.btn'）.popover（）；
}); //END$（document.ready（））

您只需启用工具提示：

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

脚本中有语法错误，正如xxphenom2xx所指出的，必须实例化工具提示

<script type="text/javascript">

    $(document).ready(function() {

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

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

</script>


$（文档）.ready（函数（）{
$（'.btn danger'）。工具提示（）；
}); //END$（document.ready（））

请注意，我使用了您的类“btn danger”。您可以创建一个不同的类，或者使用

id=“someidthatimakeup”

我在所有页面上都使用它来启用工具提示

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

原来是这样。请给他的答案投上一票（和/或选择它作为正确答案）——这太棒了

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

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

您将看到，您的长段落中的所有工具提示都具有仅包含这一行的工作工具提示

在JSFIDLE示例（上面的链接）中，我还添加了一种情况，默认情况下打开一个工具提示（通过登录按钮）。此外，工具提示代码将添加到jQuery中的按钮，而不是HTML标记中

弹出窗口的工作原理与工具提示相同：

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

就在这里！终于成功了

解决这个问题的最大问题之一是让引导程序与JSFIDLE一起工作。。。以下是您必须做的：

从这里获取Twitter引导CDN的参考：

将每个链接粘贴到记事本中，除去URL以外的所有链接。例如：
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

在JSFIDLE的左侧，打开外部资源手风琴下拉列表

粘贴每个URL，每次粘贴后按加号

现在，打开“Frameworks&Extensions”accordion下拉列表，并选择jquery1.9.1（或任何一个…）

现在您可以开始了。

使用BOOTSTRAP 3：简短而简单检查-

HTML

我必须在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用户界面
引导

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

$( 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
    });
});

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