Is there a way to style the tooltips that appear when hovering over cells in my Tabulator table? When I set tooltips:true
, Tabulator adds a title
tag, but applying CSS inline has been tricky. So far, I have tried:
div[title]:hover:after {
content:attr(title);
width: 300px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
top: 100%;
left: 50%;
margin-left: -60px;
z-index: 1;
}
I am still working on perfecting the positioning and finalizing the styles. Take a look at the image below to see what happens when I hover over the top left cell.
https://i.sstatic.net/Y9Iib.png
Currently, I am getting two tooltips - the default one and my custom one. Additionally, the custom tooltip does not extend beyond the edge of the cell.