4

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.

Cybernetic
  • 12,628
  • 16
  • 93
  • 132
  • Did you even bother reading my question? As plainly stated, this was already attempted. – Cybernetic May 06 '16 at 00:04
  • 1
    $('body').tooltip({ selector: '[rel=tooltip]' }); // i think this is for bootstrap v2. Try $('body').tooltip({ selector: '[data-toggle="tooltip"]' }); instead. http://codepen.io/partypete25/pen/RaEEPj – partypete25 May 06 '16 at 00:07

1 Answers1

8

Call this script after you created dom elements :

$('[data-toggle="tooltip"]').tooltip();
osmanraifgunes
  • 1,438
  • 2
  • 17
  • 43