2

It seems a dynamically created element with a tooltip won't be triggered using: $(this).tooltip('show');

Anything I'm doing wrong?

Reproduction online

<div class="not-editable">
    <span>Click here</span>
</div>

JS:

//dynamic tooltip
$('body').tooltip({
    selector: '.not-editable .to-edit',
    placement: 'bottom',
    trigger: 'manual',
    title: 'Actual times cannot be given as the trip is not confirmed',
    template: '<div class="tooltip error-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

});

//dynamic added element...
setTimeout(function(){
    $('.not-editable').find('span').addClass('to-edit');
}, 1000);

//Trying to trigger the tooltip
$(document).on('click', '.to-edit', function(){
    console.log("showing...");
    $(this).tooltip('show');
});
Alvaro
  • 40,778
  • 30
  • 164
  • 336

1 Answers1

0

Actually changing 

trigger: 'manual',

to

trigger: 'click | hover',

(as much as removing it does) works too as in :

https://jsfiddle.net/kj9sxnrc/4/

at Bootstrap Tooltips Docs it says

How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.

wooer
  • 1,677
  • 2
  • 16
  • 27
  • Far from ideal when dealing with multiple messages, they won't get hidden when clicking in other: https://jsfiddle.net/kj9sxnrc/5/ – Alvaro Mar 21 '16 at 19:26