如何翻转Twitter Bootstrap的工具提示

Question

我正在使用Twitter的Bootstrap来实现工具提示。目前，工具提示出现在链接上方。我希望工具提示出现在链接下方。我该如何处理？

我已经触发了工具提示，并明确指出了“bottom”，但它对我不起作用...

<script>$('#home').tooltip('hide bottom')</script>

- Jonathan

---

你可以展示一些代码类型吗？ - Scott Selby

Answer 1

$('#tooltip').tooltip({
    placement : 'left',
    title : 'first tooltip'
});

将此代码放置在<script>标签中或单独的JavaScript文件中使用。

- dezman

---

这个对我有效！非常感谢，我很感激你的帮助。 - Jonathan

Answer 2

在Bootstrap网站上，他们展示了有关工具提示的选项。其中一个选项是 placement，可以设置为顶部、底部、右侧或左侧。

因此，在添加工具提示脚本时，请按照以下方式添加选项。

$('#example').tooltip({placement: "bottom"})

- Eric Robinson

---

所以我根据您的输入修改了代码，但是工具提示仍然出现在链接上方。这是我目前的代码：<script>$('#home').tooltip('{trigger:hover}{placement:bottom]')</script> - Jonathan

你需要在 bottom 周围加上 "，并在 bottom 的结尾处加上 } 而不是 ]。其他部分看起来都很好。 - Eric Robinson

让我重新为您编写：<script> $（'#home'）.tooltip（'{trigger: "hover",placement:"bottom"}'）; </ script> - Eric Robinson

Answer 3

假设您使用的是最新版本的Bootstrap，您可以使用“bottom”位置。您可以通过选项在创建工具提示时执行此操作：$("#tt").tooltip({placement: "bottom"});或通过元素上的数据属性执行此操作：<span data-placement="bottom" ...>tooltip!</span>。据我所知。

您可以在Bootstrap tooltip部分找到有关工具提示的更多信息。

- Joshua

Answer 4

Bootstrap 的工具提示有一个 "placement" 选项。您可以将其设置为 "bottom"，如下所示：

$('#home').tooltip({
    placement : "bottom"
});

请查看官方网站以获取参考资料（v.2.3.3）或（v.3）。

- 322896

---

我认为你不需要在placement周围加引号。 - Eric Robinson

没错。如果这是一个有效的变量名（在这种情况下），你就不需要这样做。 - 322896

链接不再有效（假设该网站不仅仅是宕机）。 - Hoppe