Edit default tooltip styles

  • Resolved delifort

    (@delifort)


    7 years ago

    Hello,

    I want to edit the looks of the word that contains a tooltip link (make it blue instead of red, for example).
    Also, I want to style the actual tooltip: change the font size, and most importantly, remove that header title that is shown above the actual tips. I mostly use it for tooltips rather than glossary tips (to include references, for example), and having every tip repeating the linking words is just weird.

    Refer to image for details:
    Image

    I can certainly override the default looks using “Custom CSS plugin”, but I was thinking that maybe there’s a neater way to do it. Maybe I could edit the actual plugin files somewhere, or maybe that Theme Editor that I posted my other question about is responsible for styling tooltips.

    Thanks in advance.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Gerkin

    (@gerkin)

    Hi,

    About editing trigger link styling, you can refer to the manual page. Yeah, some things (like class names) are a bit outdated, so here are the selectors you’ll use to style a normal (not glossary) tooltip:

    .itg-tooltip  { } /* for inline tooltip container */
.itg-tooltip  > a { } /* for inline tooltip links *

    As wrote in the manual, I highly recommend you to do this override in you child theme.

    About styling the tooltip itself, I posted an answer on your question related to the theme editor, which is built for that.

    Just a note about why the documentation is a bit outdated:: A major update is in preparation, that will change most of those points. Unfortunately, I don’t have the time yet to release that update, because some more work is still needed. Editing the manual now would take me even more time, and I’ll need to update it again when the next version will be shipped. So, yeah, sorry about that…

    Thread Starter delifort

    (@delifort)

    Thanks so much.

    I just overrode “.itg-tooltip > a” in Simple Custom CSS plugin, and as for the actual tooltip style – Theme Editor works just fine. So yeah, in the end – total control over appearance of tooltips and links.

    P.S. If you override “.itg-tooltip > a” styles in Simple Custom CSS plugin, don’t forget the !important keyword next to each CSS property that you override, otherwise it won’t be forwarded. Just google “!important” if you don’t know how it works.

    Just telling all this as maybe someone else might find it useful.

    • This reply was modified 7 years ago by delifort.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Edit default tooltip styles’ is closed to new replies.