Dynamicly change bootstrap tooltip placement

340
December 10, 2016, at 12:58 PM

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.net/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.

Answer 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

Answer 2

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

$("#sample").tooltip("destroy").tooltip({placement : 'left'}).tooltip('show');
Answer 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.

READ ALSO
How can I make preset json data ready to be used in my highchart?

How can I make preset json data ready to be used in my highchart?

currently in my snippet my chart shows all data in var jsonI want to make it so when I press a button (1 month) it only shows data in the last month (30/31days)

251
Redirect with PHP after ajax call

Redirect with PHP after ajax call

Im doing the following ajax call:

508
Why Form doesn&#39;t submit with javascript if an input field&#39;s name is submit

Why Form doesn't submit with javascript if an input field's name is submit

Why Form doesn't submit on event if input field name is submitI already know it won't based on recent experience, but why not

345
Slider won&#39;t look the same on WP as offline. What&#39;s interfering?

Slider won't look the same on WP as offline. What's interfering?

I downloaded a slider called 'ParallaxContentSlider' which I intended to use for my websiteI customized it a bit offline where everything worked perfectly, however, when I upload it to WP it won't look the same at all

233