Bootstrap 3.0 Popovers和工具提示 [英] Bootstrap 3.0 Popovers and tooltips

查看：115
本文介绍了Bootstrap 3.0 Popovers和工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是Bootstrap的新手，我无法使popover和tooltip功能工作。我对下拉和模型没有问题，但我似乎缺少一些东西popover和工具提示。



我得到工具提示显示，但他们没有样式和位置像引导示例。 < / p>

请看看，让我知道我失踪了什么。

 <！DOCTYPE html> 
< html> 
< head> 
< title> Bootstrap 101 Template< / title> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0> 
<！ -  Bootstrap  - > 
< link href =css / bootstrap.min.css =stylesheetmedia =screen> 
< link href =http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css =stylesheetmedia =screen> 
< link href =css / font-awesome.min.css =stylesheetmedia =screen> 
< link href =css / index.css =stylesheetmedia =screen> 
<！ -  HTML5 shim和Respond.js IE8对HTML5元素和媒体查询的支持 - > 
<！ -  [if lt IE 9]> 
< script src =../../ assets / js / html5shiv.js>< / script> 
< script src =../../ assets / js / respond.min.js>< / script> 
<！[endif]  - > 
< / head> 
< body> 
< p id =toolclass =mutedstyle =margin-bottom：0;> 
紧身裤下一层keffiyeh 
< a href =＃data-toggle =tooltiptitle =默认工具提示>你可能< / a>没有听说过他们。照片展位胡子生牛仔布活版素食主义者信使袋stumptown。 Farm-to-table seitan，mcsweeney的可持续性奎奴亚藜8位美国服装< a href =＃data-toggle =tooltiptitle =其他工具提示>有< / a>特里理查森乙烯基青年布。胡子stumptown，cardigans banh mi lomo thundercats。豆腐生物柴油威廉斯堡marfa，四loko mcsweeney的清洁素食者chambray。一个真正具有讽刺意味的工匠< a href =＃data-toggle =tooltiptitle =这里也有一个人>无论keytar< / a>，scenester农场到表banky Austin< a href = ＃data-toggle =tooltiptitle =最后一个提示！> twitter handle< / a> freegan cred raw牛仔布单一来源咖啡病毒。< / p> 
< h3>现场演示< / h3> 
< div style =padding-bottom：24px;> 
< a id =pophref =＃class =btn btn-lg btn-dangerdata-toggle =popovertitle =A Titledata-content =这里有一些惊人的>点击切换popover< / a> 
< / div> 
 
<！ -  jQuery（Bootstrap的JavaScript插件所必需的） - > 
< script src =http://code.jquery.com/jquery.js>< / script> 
<！ - 包含所有编译的插件（如下），或根据需要包含单独的文件 - > 
< 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> 
   
 
解决方案 /stackoverflow.com/a/18411591/463065\">埃文·拉森有最好的答案。 
 
 
 
 在这里工作jsFiddle  
 
 
 
使用Evan的技巧，您可以使用一行代码实例化所有工具提示：
  $（'[data-toggle =tooltip]'）。tooltip（{'placement'：'top'}）; 
  
您将看到长段落中的所有工具提示都只有一行工作提示。 p> 
 
 
在jsFiddle示例（上面的链接）中，我还添加了一个情况，其中一个工具提示（通过登录按钮）默认为ON。此外，工具提示代码在jQuery中添加到按钮，而不是在HTML标记中。
 
 
 
 
 
 
 Popovers  do 与工具提示相同：
  $（'[data-toggle =popover]'）。 popover（{trigger：'hover'，'placement'：'top'}）; 
  
 
 
 
 
 
 
最终成功。
 
 
 
找出这个东西最大的问题之一是使用jsFiddle启动工作...以下是你必须做的：
     
     
  1. 从这里获取Twitter Bootstrap CDN的参考信息： http：//www.bootstrapcdn。 com /  
     
    2.  
     
  2. 将每个链接粘贴到记事本中，并除去所有网址。例如：
     
      // netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css  
     
    3.  
     
  3. 在jsFiddle的左侧，打开External Resources accordion下拉列表
    4.  
     
  4. 粘贴到每个URL中，在每次粘贴后按加号
    5.  
     
  5. 打开框架和扩展程序手风琴下拉列表，然后选择jQuery 1.9.1（或任何...）
    6.  
     
准备好了。
 
I am new to Bootstrap and I'm having trouble getting the popover and tooltip features to work. I had no problem with the drop downs and models but I seem to be missing something for the popover and tooltips. 



I am getting tooltips to show up but they are not styled and located like the bootstrap examples. And the popover is not working at all.



Please take a look and let me know what I am missing.
       <!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>



 解决方案 
Turns out that Evan Larsen has the best answer. Please upvote his answer (and/or select it as the correct answer) - it's brilliant.



Working jsFiddle here



Using Evan's trick, you can instantiate all tooltips with one line of code:
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

You will see that all tooltips in your long paragraph have working tooltips with just that one line.



In the jsFiddle example (link above), I also added a situation where one tooltip (by the Sign-In button) is ON by default. Also, the tooltip code is ADDED to the button in jQuery, not in the HTML markup.






Popovers do work the same as the tooltips:
$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});







And there you have it! Success at last.



One of the biggest problems in figuring this stuff out was making bootstrap work with jsFiddle... Here's what you must do:
    

  1. Get reference for Twitter Bootstrap CDN from here: http://www.bootstrapcdn.com/
    2. 

  2. Paste each link into notepad and strip out ALL except the URL. For example:
    
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
    3. 

  3. In jsFiddle, on left side, open the External Resources accordion dropdown
    4. 

  4. Paste in each URL, pressing plus sign after each paste
    5. 

  5. Now, open the "Frameworks & Extensions" accordion dropdown, and select jQuery 1.9.1 (or whichever...)
    6. 

NOW you are ready to go.


                        
这篇关于Bootstrap 3.0 Popovers和工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

                        
                    

                    

                        查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆