Search code examples
htmlcsswordpresstooltip

Apply css rules to one single tooltip?


Very much a newcomer to all coding languages, and trying to make a blog on wordpress.org

I'm using a plugin on wordpress which creates tooltips (https://wordpress.org/plugins/simple-tooltips/)

I have a very text-heavy tooltip, and have managed to make it scrolling (instead of displaying all the text at once), using the following css in the editor

.Zebra_Tooltip .Zebra_Tooltip_Message {

  overflow: scroll;
        
  height: 200px;

}

(the zebra tooltip classes I found provided by the developer in the support)

The problem is, this makes all my other tooltips 200px height as well, when most of them don't need to be.

SO, my question: I'm trying to find a way to apply that css code purely to the relevant tooltip.

I think it might be something to do with using the 'additional css class' function in the relevant block in the gutenberg editor, but I've tried a couple of things and they haven't worked.

Any help greatly appreciated!

Cheers.


Solution

  • You can't target individual tooltips, but you can change the style to target only tooltips with large amount of content:

    .Zebra_Tooltip {
    
      overflow: auto; /* only show scrollbar when needed */
            
      max-height: 200px; /* limit height to 200px - smaller tooltips won't be effected */
    
    }