动态更改引导工具提示的位置

Dynamically change bootstrap tooltip placement

本文关键字：工具提示 位置 动态      更新时间：2023-09-26

我试图动态更改工具提示的位置，但不起作用。

<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/

我在点击更改Twitter引导工具提示内容中找到了一个很好的答案，该内容显示了如何使用tooltip('fixTitle')方法动态更改工具提示文本。但找不到可以安置的东西。

在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');
});

在此处播放

尝试在工具提示中使用"destroy"并再次绑定

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

虽然我不喜欢使用！重要的是，在这种情况下作弊确实有帮助。

.tooltip {
    left: 12px!important;
}

http://jsfiddle.net/znvv9ar5/1/因此

点击即可应用此CSS。

相关文章：