6

我花了大约最后一个小时检查我能找到的关于如何让 Bootstrap 3 的工具提示工作的每个问题。

我已经设法让常规的、无样式的工具提示正常工作，但我真的想要那种引导程序的外观。

我知道已经对此进行了很多讨论，但我认为有一个关于如何让工具提示工作的分步指南真的很有帮助，因为在我看来很多人（包括我自己）在启动和运行时遇到问题。

仅供参考，我在 Java Web 服务器上运行，所以我所有的前端都是 JSP。

谢谢，祝你好运。

4

2 回答 2

10

这是一个小提琴：

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

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

$(function(){
    $('#right').tooltip();
    $("#left").tooltip({
        placement: "left",
        title: "tooltip on left"
    });
});

更多工具提示选项在这里。

请注意，您必须在 Javascript 中添加工具提示处理程序。

于 2013-09-06T04:20:56.167 回答
3

我的 HTML：

<a href="#" id="mytooltip" class="btn btn-primary" data-toggle="tooltip" title="my tooltip"> tooltip </a>

我的 jQuery：

$(document).ready(function(){ 
    $('#mytooltip').tooltip();
});

现在只需添加属性：data-placement="left"像这样：

<a href="#" id="mytooltip" class="btn btn-primary" data-toggle="tooltip" title="my tooltip" data-placement="left"> tooltip </a>
于 2014-03-23T14:51:40.657 回答