So I'd like to get my Tabulator tooltips inline with the rest of my Bootstrap 5 tooltips.
Regular tooltips work:
let myToolTip = function(cell){
let name = cell.getRow().getData().name
let supplier = cell.getRow().getData().supplier
return "Name: " + name + "\nSupplier: " + supplier
}
However, they're in browser default. I'd like it to look a bit prettier and inline with the rest of the tooltips on the site.
I've tried a row formatter inside the table:
rowFormatter:function(row){
row.getElement().setAttribute("data-bs-toggle", "tooltip")
row.getElement().setAttribute("data-bs-placement", "top")
row.getElement().setAttribute("title", "Test")
}
But nothing appears. The DOM is in fact manipulated and the properties show up on the table rows, but the tooltips don't appear.
I thought that I might have some luck with tooltipGenerationMode:"hover", but I guess the Bootstrap tooltips are operating outside the Tabulator remit. Something must be happening when my mouse moves over the table rows that is conflicting with the Bootstrap tooltips.
My other thinking is a custom formatter to return html for each cell, but this starts to get a bit complex.
The tooltips are working on the site.
Any folks who've solved this (plain JS please!), I'd love to hear how you solved this.
OK it's a bit convoluted, but I had to initialise the tooltips inside the rowFormatter.
import { Tooltip } from 'bootstrap';
// inside the tabulator instance
rowFormatter:function(row){
var data = row.getData();
var id = row.getData().id
let elId = "fermall-" + id
row.getElement().setAttribute("id", elId)
row.getElement().setAttribute("title", "Test ID: " + id)
var exampleEl = document.getElementById(elId)
var tooltip = new Tooltip(exampleEl)
},
This does allow for dynamic tooltip generation (ie when the Tabulator contents change) as well, which is better than running the tooltip generator on page load.
I tested this without the data-bs-toggle property and it still seems to work.