Tooltips

Add tooltips in Joomla!

  • Last updated: 14 Sep 2020
  • Version: 7.6.2
  • Types: System plugin Editor button plugin
  • Joomla rating: 100%

With Tooltips you can display content when the user moves the mouse pointer over an element, without clicking it.

Tooltips are also known as "popovers".

When a user moves their pointer to text, or an image, for which you have defined a tooltip, a small "hover box" appears. This box can contain text or an image. Optionally the text can contain html formatting including URLs.

The syntax simply looks like:

{tip title="Wow!" content="Now I can give something a cool tooltip!"}This text has a tooltip.{/tip}

The result is: This text has a tooltip.

But you can also give tooltips styles, like this. Or even use images in popups: 

Use it anywhere

You can create these tooltips almost anywhere in your site. Not only in articles, but anywhere you can enter text, like in modules and components.

The tooltips are fully styleable through settings and CSS.

Note: On touchscreen devices, the tooltips will be triggered by clicking on them.

See the full documentation and watch the videos to find out more!

 

Tooltips for Joomla 3 is based on the Bootstrap popovers, so it uses and needs the Bootstrap 2 framework (styles and scripts) that comes with Joomla core.
This means that Tooltips will only function correctly if your template allows the Bootstrap framework to be loaded and does not cause conflicts with the jQuery and bootstrap javascripts.