Adding tooltips to jQuery dynamically created elements

Question

I found this helpful jsfiddle on adding tooltips with jQuery.

How could I get the same results but with dynamically created elements?

Without any plugins, if thtas possible.

Depending on which options a user ticks, my div will display one of three coloured circles to show the importance of a task. Can I add a tooltip to the circles in a manner such as this?

  jQuery(function() {
      jQuery( '.veryImportant' ).tooltip();
  });

Need more context. Show the code that creates the circles, and your html. — Jason P, Sep 24 '13 at 15:39

score 7 · Accepted Answer · answered Sep 24 '13 at 15:50

You just add the tooltip how you normally would, only make sure that you are calling .tooltip() AFTER the element has been added to the page. Based on your code, it seems you're trying to add it immediately, and if that element doesn't exist, it will never get it.

Simple sample:

<div id='test'>im a div</div>

$("#test").append("<span id='spantest'>hey</span>");
$("#spantest").tooltip(); //works fine, since the element exists at time of call

score 0 · Answer 2 · edited May 23 '17 at 12:02

0

The only working solution for me was using createdRow in datatables, see Tooltip doesn't work on datatables child rows

edited May 23 '17 at 12:02

Community

1
1

answered Dec 12 '16 at 23:40

maosmurf

1,858
17
16

Adding tooltips to jQuery dynamically created elements

2 Answers2