Por lo tanto, me gustaría alinear mi información sobre herramientas de Tabulador con el resto de mi información sobre herramientas de Bootstrap 5.
La información sobre herramientas regular funciona:
let myToolTip = function(cell){ let name = cell.getRow().getData().name let supplier = cell.getRow().getData().supplier return "Name: " + name + "\nSupplier: " + supplier }Sin embargo, están en la configuración predeterminada del navegador. Me gustaría que se vea un poco más bonito y en línea con el resto de la información sobre herramientas en el sitio.
Probé un formateador de filas dentro de la tabla:
rowFormatter:function(row){ row.getElement().setAttribute("data-bs-toggle", "tooltip") row.getElement().setAttribute("data-bs-placement", "top") row.getElement().setAttribute("title", "Test") }Pero no aparece nada. De hecho, el DOM se manipula y las propiedades se muestran en las filas de la tabla, pero la información sobre herramientas no aparece.
Pensé que podría tener algo de suerte con tooltipGenerationMode:"hover" , pero supongo que la información sobre herramientas de Bootstrap está operando fuera del ámbito del tabulador. Algo debe estar sucediendo cuando mi mouse se mueve sobre las filas de la tabla que está en conflicto con la información sobre herramientas de Bootstrap.
Mi otro pensamiento es un formateador personalizado para devolver html para cada celda, pero esto comienza a ser un poco complejo.
La información sobre herramientas está funcionando en el sitio.
Cualquier persona que haya resuelto esto (¡simple JS, por favor!), Me encantaría saber cómo lo resolvió.
Está bien, es un poco complicado, pero tuve que inicializar la información sobre herramientas dentro de 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) },Esto también permite la generación dinámica de información sobre herramientas (es decir, cuando cambia el contenido del tabulador), lo cual es mejor que ejecutar el generador de información sobre herramientas en la carga de la página.
Probé esto sin la propiedad data-bs-toggle y todavía parece funcionar.