首页 文章

Bootstrap工具提示使用实际示例工具提示按钮？

提问于
浏览 次
1

http://getbootstrap.com/javascript/#tooltips

在“四个方向”示例中，四个按钮在左侧，顶部，底部和右侧都有工具提示 .

我试图在我自己的html文件中复制它，bootstrap，jquery，css等正确设置 .

但是，bootstrap文档说这是选择加入功能，这意味着我必须自己初始化它，他们为使用提供的示例代码是这样的：

$('#example').tooltip(options)

所以我把它包装在html文件中关闭head标签上方的脚本标签中，但它不起作用 . 我知道#example部分可能是不正确的语法，但我不知道＃表示什么以及放在这里使它挂钩到示例“四个方向”代码，这是：

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

我是否将“#example”更改为“#button”以将其与按钮类型相关联，将“#btn btn-default”更改为将其与类关联，或将“#tooltip”更改为将其与数据切换相关联，或者#right'，'＃left'，'＃top'，'＃bottom'在四个复制的行中将它与所有数据放置标记相关联，或'#title'将其与 Headers 相关联？

我已经找到了其他stackoverflow答案，如何通过粘贴似乎使用替代解决方案的代码来完成此操作，例如将其与“rel =”标记相关联，但我试图理解这不仅仅是复制粘贴工作代码 .

这是我的HTML代码供参考：

http://pastebin.com/83Cf8Csr

javascript jquery html css twitter-bootstrap

1 回答

  • 1

    首先，在开始编写使用上述内容的任何js之前，需要包含jquery和bootstrap.js . 其次你不需要这个
    $（ '＃示例'） . 提示（选项）
    因为您已经在使用数据属性作为js代码的替代品 . 你可以使用但不能同时使用两者 . <button type =“button”class =“btn btn-default”data-toggle =“tooltip”data-placement =“left”title =“左侧工具提示”>左侧工具提示</ button>
    数据切换和数据放置将初始化您的工具提示 .

    这是我的坏事，我错过了它所说的选择的部分 .

    因此，在您的情况下，您尝试在#example上初始化工具提示，其中没有具有该ID的元素 . 指定正确的ID或类 . 其次，数据属性将作为选项，因此您不需要初始化选项 . 这是一个例子

    Fiddle

    回复于

相关问题