Search code examples
htmlcsstabulator

How to apply CSS to tooltips in Tabulator

I want my Tabulator table to have CSS applied to the tooltips that appear when hovering over cells. Tabulator adds a title tag whenever the user sets tooltips:true. However, applying CSS inline is challenging. I did:

div[title]:hover:after {
    content:attr(title) ;
    width: 300px ;
    background-color: black ;
    color: #fff ;
    text-align: center ;
    border-radius: 6px ;
    padding: 5px 0 ;

    /* Position the tooltip */
    top: 100%;
    left: 50%;
    margin-left: -60px;
    z-index: 1 ;
}

I haven't worked out positioning or finalized my styles yet. You can see from the below image what happens when I hover over the top left cell.

enter image description here

I get two tooltips- the default and my custom one. In addition, the custom tooltip stops at the cell edge.

Solution

  • Tabulator uses the HTML title attribute to display tooltips, so the styling is down to the browser and is not user customizable.

    If you want a custom tooltip then i would suggest using a Custom Formatter to add a 3rd party tooltip generation plugin.