Dynamically Change Bootstrap Tooltip Placement

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

Solution 1:

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

Solution 2:

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

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

Solution 3:

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

.tooltip {
    left: 12px!important;
}

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

You can apply this CSS with the on click.