U54 U54 - 4 months ago 10x
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

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

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.



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


Template.myColumnLabel.onRendered(function() {
    // Tooltip

.js (reactive table)

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