skip to Main Content

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

$("#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.



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

    .tooltip {
        left: 12px!important;
 as a result.

    You can apply this CSS with the on click.

    Login or Signup to reply.
  2. Try using “destroy” on the tooltip and bind it again

    $("#sample").tooltip("destroy").tooltip({placement : 'left'}).tooltip('show');
    Login or Signup to reply.
  3. 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';


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

    Play it here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top