Dynamically change tooltip placement

Question

I tried changing the dynamic location of the tooltip, 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.net/znvv9ar5/

I found a good answer in Change the contents of the Twitter-Boottrap tooltip on a click , which shows how to dynamically change the tooltip text using the tooltip('fixTitle') method. But could not find something to post.

Answer 1

In Bootstrap 2.x, the answer is:

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

However, from Bootstrap 3, all Bootstrap data is named using bs:

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

Code:

 $("#changeBtn").click(function () { $('#sample').data('tooltip').options.placement = 'left'; $("#sample").tooltip('show'); }); 

Play it here

Answer 2

Try using destroy in the tooltip and bind it again

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

Answer 3

Although I do not like to use! it is important that this helps a little cheat in this case.

 .tooltip { left: 12px!important; } 

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

You can apply this CSS with a click.