Add bootstrap tooltip to dynamically created button [duplicate]

Question

I dynamically create buttons like this:

var my_button = document.createElement('button');
my_button.setAttribute('id', "the_id");

I am trying to use Bootstrap tooltips with these buttons but I cannot get it to work.

my_button.setAttribute('data-toggle', 'tooltip');
my_button.setAttribute('data-placement', 'top');
my_button.setAttribute('title', 'this is my text');

In $(document).ready(function() I have

$('[data-toggle="tooltip"]').tooltip();

And to try and deal with the fact that the buttons are dynamically created I use:

$('body').tooltip({ selector: '[rel=tooltip]' });

I have sourced all the necessary bootstrap files, and tested the tooltip using text element tag, and that works fine.

When I hover over the button nothing happens.

Answer 1

Call this script after you created dom elements :

$('[data-toggle="tooltip"]').tooltip();