Individually styled tooltips

The tooltips - by default - have a tasteful and neutral styling. It is based on the tooltips used in the Joomla administrator, with the addition of some CSS3 styles like border radius and a shadow.

To add an extra class to a tooltip (for styling purposes), you can use add a class parameter:

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

Color Classes

Tooltips' stylesheet comes with styling for the classes blue, green, orange, red and grey.

default | blue | green | orange | red | grey

{tip title="Tooltip Title" content="Tooltip text..."}default{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="blue"}blue{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="green"}green{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="orange"}orange{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="red"}red{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="gray"}gray{/tip} / {tip title="Tooltip Title" content="Tooltip text..." class="grey"}grey{/tip}

Bootstrap Classes

You can also use the Bootstrap classes primary, info, success, warning and danger / error.

primary | info | success | warning | danger / error

{tip title="Tooltip Title" content="Tooltip text..." class="primary"}primary{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="info"}info{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="success"}success{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="warning"}warning{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="danger"}danger{/tip} / {tip title="Tooltip Title" content="Tooltip text..." class="error"}error{/tip}

Custom styling

Tooltips gives you many options to adjust the default styling and can further be fully styled through CSS. See the Tooltips system plugin settings for an overview of all styling options.

Tooltips that contain only an image will have a different class name and can therefore be styled differently to text tooltips. By default, the image tooltips have less padding.

If you have sufficient CSS knowledge you can also add your own classnames and styling via CSS.

Take a look at the stylesheet that comes with Tooltips in: /media/tooltips/css/style.min.css.

You can overrule the Tooltips stylesheet by copying it or creating your own in: /templates/[YOUR TEMPLATE]/css/tooltips/style.min.css.

That way you can fully customize the styling of the tooltips.

Please note that the css in the style.min.css is compressed (minified). To get the not-minified css, look in the style.css. But Tooltips will load the file name style.min.css, regardless of whether the css inside that file is minified or not.
The original LESS files are included in the /media/tooltips/less folder.

The classname you add, will be added to both the link text element and the tooltip element. So you can use CSS to style it like you want. Here is an example:

{tip title="Tooltip Title" content="Tooltip text..." class="mystyle"}My custom styled tooltip{/tip}