Bootstrap 3.0 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>
214892 次浏览

您只需启用工具提示:

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

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

<script type="text/javascript">


$(document).ready(function() {


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


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


</script>

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

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

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

原来,Evan Larsen 有最好的答案。请升级他的答案(和/或选择它作为正确的答案)-这是辉煌的。

在这里工作

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

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

您将看到长段落中的所有工具提示都只有一行。

在 jsFiddle 示例(上面的链接)中,我还添加了一种情况,其中一个工具提示(通过 Sign-In 按钮)默认为 ON。此外,工具提示代码是添加到 jQuery 中的按钮,而不是在 HTML 标记中。


Popover 的工作原理与工具提示相同:

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

就是这样,终于成功了。

解决这个问题的最大问题之一就是如何使用 jsFiddle 进行 bootstrap 工作... ... 以下是您必须做的:

  1. 从这里获得 Bootstrap CDN 的参考: < a href = “ http://www.bootstrapcdn.com/”rel = “ norefrer”> http://www.bootstrapcdn.com/
  2. 将每个链接粘贴到记事本中,并删除除 URL 以外的所有内容。例如:
    // netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css < br >
  3. 在左侧的 jsFiddle 中,打开 ExternalResources 手风琴下拉菜单
  4. 粘贴每个 URL,每次粘贴后按加号
  5. 现在,打开“ Framework & Extended”下拉菜单,选择 jQuery 1.9.1(或其他...)

现在你可以走了。

使用 BOOTSTRP 3: 简短和简单

检查 -JS 小提琴

超文本标示语言

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

我必须在 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'
});

如果你正在使用 Rails 和 ActiveAdmin,这将是你的问题: Https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 基本上,与 active _ admin. js 的冲突

这就是解决办法: Https://stackoverflow.com/a/11745446/264084(凯伦的回答) Tldr: 将 active _ admin 资产移动到“厂商”目录。