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

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/

我在单击“更改Twitter Bootstrap工具提示”内容时找到了一个很好的答案，该内容显示了如何通过使用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');

});

在这里播放

Answer 2

尝试在工具提示上使用“销毁”并再次将其绑定

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

Answer 3

虽然我不喜欢使用！important，但在这种情况下确实有助于作弊。

.tooltip {
    left: 12px!important;
}

结果是http://jsfiddle.net/znvv9ar5/1/ 。

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