1

I have a table in which rows are generated dynamically. I have to add tooltip to one of the cells in all the dynamically generated rows. The tooltip is working for <th></th> but not for the <td></td>

Here is my table

<table>
  <thead>
    <tr><th id="table-head" data-toggle="popover" data-trigger="" data-content="Sample Tootlip">Table Head</th></tr>
  </thead>
<tbody>
<tr data-ng-repeat="item in Samplelist">
<td class="tableContent" data-toggle="popover" data-trigger="" data-content="Content Tootlip">{{item.value}}</td>
</tr>
</tbody>
</table>

And Here is the JQuery

$('.tableContent').popover({
                container: 'body',
                placement: 'left',
                trigger: 'hover'

            });
$('#table-head').popover({
                container: 'body',
                placement: 'left',
                trigger: 'hover'

            });

The tooltip is appearing in <th></th> but not in <td></td> Is it because its dynamic how to solve it?

saikat mukherjee
  • 355
  • 1
  • 3
  • 17

1 Answers1

4

You are correct in your assumption that the problem is because the rows are being created dynamically. So the DOM elements don't exist when the 

.popover({...})

function is called.

Solution:

What you need to do is call the,

.popover()

function when you hover over your element.

$('body').on('mouseenter', '.tableContent', function () {
    if ($(this).attr('data-toggle') != 'popover')
    {
        $(this).popover({
            container: 'body',
            placement: 'left',
            trigger: 'hover'
        }).popover('show');
    }
});

Explanation

When the mouse hovers over your element a check is done whether the data-toggle has been added yet, if it has not been added the .popover() function is called adding the data-toggle and also the popover('show') is called to actually show the item on the first hover.

After this the popover funtion should work normally on hover.

Hope it helps. Happy Coding.

Terrance00
  • 1,658
  • 1
  • 20
  • 29