Bootstrap 3.0弹出框和工具提示

wlsrxk51  于 12个月前  发布在  Bootstrap
关注(0)|答案(8)|浏览(124)

我是Bootstrap的新手,我在弹出框和工具提示功能上遇到了麻烦。我对下拉唐斯和模型没有问题,但我似乎缺少了弹出框和工具提示的一些东西。
我得到的工具提示显示,但他们不是风格和定位像 Bootstrap 的例子。和弹出窗口是不工作的。
请看一下,让我知道我错过了什么。

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

字符串

b1payxdu

b1payxdu1#

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

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

字符串

i7uaboj4

i7uaboj42#

原来Evan Larsen has the best answer
Working jsFiddle here
使用Evan的技巧,你可以用一行代码示例化所有的工具提示:

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

字符串
您将看到,在您的长段落中,所有工具提示都只有这一行的工作工具提示。
在jsFiddle示例(上面的链接)中,我还添加了一个工具提示(通过Sign-In按钮)默认为ON的情况。此外,工具提示代码被添加到jQuery中的按钮中,而不是HTML标记中。
弹出框 * 确实 * 与工具提示的工作方式相同:

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


就这样!终于成功了。
解决这个问题的最大问题之一是让bootstrap与jsFiddle一起工作.以下是你必须做的:
1.从这里获取Twitter Bootstrap CDN的参考:http://www.bootstrapcdn.com/
1.将每个链接粘贴到记事本中,并删除除URL之外的所有链接。例如:

//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

1.在jsFiddle中,在左侧,打开外部资源 accordion
1.粘贴在每个URL中,每次粘贴后按加号
1.现在,打开“Frameworks & Extensions” accordion 菜单,选择jQuery 1.9.1(或其他)。
现在你准备好了。

ikfrs5lh

ikfrs5lh3#

使用BOOTSTRAP 3:简洁

检查-JS Fiddle
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(); 
});

vngu2lb8

vngu2lb84#

我必须在多姆准备好的时候做

$( 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
  • Bootstrap
r7s23pms

r7s23pms5#

出于某种原因,我能够让我的代码工作的唯一方法是通过切换几件事。如果到目前为止还没有为你工作,请给予一个旋转:

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

字符串

xfyts7mz

xfyts7mz6#

您的脚本中有一个语法错误,正如xXPhenom 22 Xx所指出的,您必须示例化工具提示。

<script type="text/javascript">

    $(document).ready(function() {

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

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

</script>

字符串
注意,我使用了你的类“btn-danger”。你可以创建一个不同的类,或者使用id="someidthatimakeup"

tpxzln5u

tpxzln5u7#

您只需要启用工具提示:

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

字符串

jxct1oxe

jxct1oxe8#

如果你使用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”目录中。

相关问题