Themes

Tooltips comes with a number of preset Themes you can choose from:

  • Dark
  • Light
  • Automatic (Default Dark) PRO
  • Automatic (Default Light) PRO

You can override the Theme you choose in the {tip} tag, like:

{tip ... theme="dark"}

Individually styled tooltips

The tooltips - by default - is gray and neutral.

Each theme supports a range of color and named styles. Just add a style parameter:

Hover here to see tooltip

{tip content="This is a tooltip!" style="green"}Hover here to see tooltip{/tip}

Color Styles

Tooltips comes with styling for these color styles: red, orange, yellow, green, teal, blue, purple, pink, grey and black.

Light Theme

red | orange | yellow | green | teal | blue | purple | purple | grey | black

{tip ... theme="light" style="red"}red{/tip} |{tip ... theme="light" style="orange"}orange{/tip} | ...

Dark Theme

red | orange | yellow | green | teal | blue | purple | purple | grey | black

{tip ... theme="dark" style="red"}red{/tip} |{tip ... theme="dark" style="orange"}orange{/tip} | ...

Status Styles

You can also use a number of status based styles, that are aliases of some of the color styles: primary, success, info, warning and danger / error.

Light Theme

primary | success | info | warning | danger | error

{tip ..." theme="light" style="primary"}primary{/tip} | {tip ... theme="light" style="success"}success{/tip} | ...

Dark Theme

primary | success | info | warning | danger | error

{tip ..." theme="dark" style="primary"}primary{/tip} | {tip ... theme="dark" style="success"}success{/tip} | ...

Custom Styling

You can override styles via template CSS overrides. How to override the CSS files, can differ depending on the template you use. So you might need to ask your template developer for support on that.
Here is the information Joomla provides for the standard way:
https://docs.joomla.org/Understanding_Output_Overrides#Media_Files_Override

You can check the CSS files that come with Tooltips to see how to style things (see the media/tooltips/css and media/tooltips/scss folders).

Custom Theme

You also have the ability to choose the 'Custom' theme. This will result in pretty much no styling at all. And you will need to override the custom.css (and custom.min.css) file via your template.

Only use this option if you fully understand how CSS works and you know what you are doing.