javascript - Dynamically change bootstrap tooltip placement - Stack Overflow

admin管理员组

文章数量:1398999

I tried to change the tooltip placement dynamically but it does not work.

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

And for js:

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

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

})

/

I found a good answer at Change Twitter Bootstrap Tooltip content on click which shows how to change tooltip text dynamically by using tooltip('fixTitle') method. But could not find something for placement.

I tried to change the tooltip placement dynamically but it does not work.

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

And for js:

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

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

})

http://jsfiddle/znvv9ar5/

I found a good answer at Change Twitter Bootstrap Tooltip content on click which shows how to change tooltip text dynamically by using tooltip('fixTitle') method. But could not find something for placement.

• javascript
• jquery
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited May 2, 2019 at 12:33 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Nov 18, 2015 at 13:51 Alireza FattahiAlireza Fattahi 45.7k1717 gold badges131131 silver badges184184 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

In Bootstrap 2.x, the answer is:

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

However, from Bootstrap 3, all Bootstrap data is namespaced with bs:

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

Code:

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

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

});

Play it here

Try using "destroy" on the tooltip and bind it again

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

Although I do not like using !important it does help to cheat a little in this case.

.tooltip {
    left: 12px!important;
}

http://jsfiddle/znvv9ar5/1/ as a result.

You can apply this CSS with the on click.

本文标签： javascriptDynamically change bootstrap tooltip placementStack Overflow