Question

我花了最后一个小时左右检查了我可以找到的关于如何使Bootstrap 3的工具提示工作的每个问题。

我设法让常规的，没有风格的工具提示工作，但我真的想要那个引导程序。

我知道已经有很多关于此问题的讨论了，但我认为有一个关于如何使工具提示正常工作的分步指南真的很有帮助，因为在我看来很多人（包括我自己在内容上遇到了问题。

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

谢谢，并且有一个好的。你好。

Answer 1

这是fiddle：

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

更多工具提示选项为here。

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

Answer 2

我的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>

使用Bootstrap 3的工具提示

2 个答案:

我的HTML：

我的jQuery：