Question

我尝试动态更改工具提示展示位置但不起作用。

<input type="text" id="sample" title="Tip">
<button name="change me" id="changeBtn">Change Tool Tip!</button>

对于js：

//Initiall tooltip for all elements
$("[title!='']").tooltip();

$("#changeBtn").click(function () {
    //Change tooltip placment
    $("#sample").tooltip({placement : 'left'}).tooltip('show');

})

http://jsfiddle.net/znvv9ar5/

我在Change Twitter Bootstrap Tooltip content on click找到了一个很好的答案，其中显示了如何使用tooltip('fixTitle')方法动态更改工具提示文本。但找不到放置的东西。

Answer 1

在Bootstrap 2.x中，答案是：

$('#sample').data('tooltip').options.placement = 'right';

但是，从Bootstrap 3开始，所有Bootstrap数据都使用bs命名为

$('#sample').data('bs.tooltip').options.placement = 'right';

<强>代码：

$("#changeBtn").click(function () {

    $('#sample').data('tooltip').options.placement = 'left';
    $("#sample").tooltip('show');

});

Play it here

Answer 2

尝试在工具提示上使用“destroy”并再次绑定

$("#sample").tooltip("destroy").tooltip({placement : 'left'}).tooltip('show');

Answer 3

虽然我不喜欢使用！重要但在这种情况下它会有所帮助。

.tooltip {
    left: 12px!important;
}

结果是

http://jsfiddle.net/znvv9ar5/1/。

您可以在点击时应用此CSS。

动态更改引导工具提示放置

3 个答案: