【问题标题】:How to flip Twitter Bootstrap's Tooltips如何翻转 Twitter Bootstrap 的工具提示
【发布时间】:2012-07-19 19:31:41
【问题描述】:

我正在使用 Twitter 的 Bootstrap 来实现工具提示。目前,工具提示显示在链接上方。我希望工具提示出现在链接下方。我该怎么做呢?

我正在触发工具提示,它清楚地表明“底部”,但它不想为我工作......

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

【问题讨论】:

  • 你能展示一些代码吗?

标签: javascript css twitter-bootstrap tooltip


【解决方案1】:
$('#tooltip').tooltip({
    placement : 'left',
    title : 'first tooltip'
});

&lt;script&gt; 标记内或单独的 JavaScript 文件中使用它。

【讨论】:

  • 这个似乎对我有用!非常感谢,感谢您的帮助。
【解决方案2】:

假设您使用的是最新的 Bootstrap,您将使用“底部”的位置。您可以通过创建工具提示时的选项来执行此操作:$("#tt").tooltip({placement: "bottom"}); 或通过元素上的数据属性:&lt;span data-placement="bottom" ...&gt;tooltip!&lt;/span&gt; 我相信。

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

【讨论】:

    【解决方案3】:

    在引导网站上,它们显示了工具提示的选项。其中一个选项是placement 可以设置为顶部、底部、右侧或左侧。

    因此,当您为工具提示添加脚本时,请选择这样的选项

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

    【讨论】:

    • 所以我根据您的输入修改了代码,但工具提示仍然出现在链接上方。这是我目前拥有的:
    • 你需要"在底部,}在底部而不是]。其他一切看起来都不错
    • 其实让我为你重写&lt;script&gt;$('#home').tooltip('{trigger: "hover", placement: "bottom"}');&lt;/script&gt;
    【解决方案4】:

    引导工具提示有一个“放置”选项。您可以像这样将其设置为“底部”:

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

    请参阅他们的官方网站以获取参考资料 (v.2.3.3) 或 (v.3)。

    【讨论】:

    • 我认为您不需要在展示位置周围加上引号
    • 对。如果它是有效的变量名(在这种情况下),则不必这样做。
    • 链接不再起作用(假设网站不只是关闭)
    猜你喜欢
    • 2012-05-13
    • 2015-03-05
    • 2012-10-31
    • 1970-01-01
    • 1970-01-01
    • 2012-04-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多