U54 U54 - 5 months ago 18
Javascript Question

Tooltip in reactive-table column header stops working when sorting the table based on that column

I'm creating a table using the reactive-table package and running into an issue with adding a tooltip to the title. Basically I'm trying to have a tooltip in my column title that way when a user puts their cursor over it a little bit of information about the column will popup. Here is what I have to make this work:

{ key: 'example',
label: function () {
return new Spacebars.SafeString('<span data-toggle="tooltip" title="This is some example text for the tooltip!">Example Title </span>');
}
},


To initialize the tooltip:

Template.myTemplate.onRendered(function() {
// Tooltip
$("[data-toggle=tooltip]").tooltip();
});


When I first refresh the page it works exactly as it should and when I put my cursor over the title the tooltip appears. The issue I am having is when I click on that title to sort the table rows based on that column, when I do this the tooltip stops working. I can click on any of the other column titles and sort the table rows based on those and it will still work, but when I click this one with the tooltip it causes the tooltip to not work anymore unless I refresh the page.

Any ideas on why this would be happening or how I could fix it?

U54 U54
Answer

I solved this issue by using a template for my label and putting the tooltip inside of that rather than using a function. I then placed the tooltip initialization JS inside of that template.onRendered.

Example:

.html

<template name="myColumnLabel">
    <span data-toggle="tooltip" title="This is some example text for the tooltip!">Example Title</span>
</template>

.js

Template.myColumnLabel.onRendered(function() {
    // Tooltip
    $("[data-toggle=tooltip]").tooltip();
});

.js (reactive table)

{ key: 'example', label: Template.myColumnLabel }
Comments