Tooltips

Add tooltips in Joomla!

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

Tutorial for Tooltips

There is a Free and a Pro version of Tooltips.
The parts in this tutorial that only concern the Pro version will be marked with: Pro only

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.

Introduction

Tooltips is a Joomla! system plugin that allows you to display content when the user moves the mouse pointer over an element, without clicking it (also known as "popovers").

It also comes with an editor button plugin.

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:

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.

How to use it (syntax)

Using Tooltips is pretty simple and straightforward. You just place {tip} tags around the text (or image) that should have a tooltip.

You don't need to go into html view, you can use this right in your WYSIWYG editor.

Tooltip with only text

The syntax for a simple tooltip looks like this:

Hover here to see tooltip

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

When you only have a content in the tag and no other parameters (like title, class, etc), you can also place the tooltip text directly in the tag, like:

{tip This is a tooltip!}Hover here to see tooltip{/tip}

Tooltip with a title and text

To create a tooltip with a title, use the title parameter, like:

Hover here to see tooltip

{tip title="Cool Title!" content="This is the text in the tooltip"}Hover here to see tooltip{/tip}

Tooltip with only a title

You can also create a tooltip with only a title and no content:

Hover here to see tooltip

{tip title="Tooltip Title"}Hover here to see tooltip{/tip}

Tooltip with rich text

The tooltips can contain rich text formatting, like bold, italic and underlined text. Just format the text through your editor's styling options.

Hover here to see tooltip

{tip content="You can use bold, italic, underlined text.
Or use enters and any other markup you want!"}Hover here to see tooltip{/tip}

Tooltip with images

You can also make images open a tooltip, and you can place images inside the tooltip text itself.

You can even use this - for example - as a gallery:

Syntax

To create this, simply place the thumbnail images in your editor and surround them with the {tip} tags.

You can then use the image parameters to define the large images that will appear inside the tooltip:

{tip image="images/fruit/apple.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/banana.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/blueberry.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/strawberry.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/orange.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/lime.jpg" image_height="150" image_width="200"}{/tip}

Or you can simply place the large images right inside the content parameters using your editor:

{tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip}

Editor Button

You can enter the Tooltips tags directly into your content. However, to save time typing and remembering what the exact syntax is, Tooltips comes with a handy editor button.

You can use this editor button (located below the text input area) to place an example Tooltips tag block in your article (or other editor fields).

After inserting the example code, you can change it in your editor to whatever you desire.

You can customize the default example code in the Tooltips system plugin settings.

Styling

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:

My custom styled tooltip

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

Click mode Pro only

With the Pro version, Tooltips can also be triggered by clicking on the link instead of hovering over it.

This can be set as the default behaviour in the Tooltips system plugin settings, or overruled via the mode parameter in the tag.

So to use click mode, you can simply add mode="click" (or add mode="hover" if you have the default set to click).

Click here to see tooltip

{tip content="This is a tooltip!" mode="click"}Click here to see tooltip{/tip}
Note: On touchscreen devices, Click Mode is always active - even with the Free version - and the tooltips will always be triggered by clicking on them.

Positioning Pro only

In the Pro version of Tooltips you have the option to set the positioning of the tooltips: Top (default), Bottom, Left or Right.

There is a global option in the Tooltips system plugin settings that will affect all tooltips.

But you can also overrule this in the {tip} tag by adding add a position parameter with the value top, bottom, left or right.

Top
Bottom
Left
Right

{tip title="Tooltip Title" content="Tooltip text..." position="top"}Top{/tip}
{tip title="Tooltip Title" content="Tooltip text..." position="bottom"}Bottom{/tip}
{tip title="Tooltip Title" content="Tooltip text..." position="left"}Left{/tip}
{tip title="Tooltip Title" content="Tooltip text..." position="right"}Right{/tip}

In the Tooltips system plugin settings you also have the Auto-positioning option to make the tooltip show in a different position when there is not enough room in the default position.

Settings

Tooltips is packed with options, giving you control over how the tooltips look and behave. Here is the full list of options you can find in the Tooltips system plugin settings:

Styling

Load Stylesheet Select to load the extensions stylesheet. You can disable this if you place all your own styles in some other stylesheet, like the templates stylesheet.

Link

Color The color of the tooltip link. Leave empty to use the default color defined by your template.
Underline Select how to underline the tooltip link. This will not underline linked images.

Options: No, Yes, Dotted, Dashed
Underline Color The color of the underline of the tooltip link

Tooltip

Title Color The color of the text in the tooltip title. Leave empty to use the default color defined by your template.
Text Color The color of the text in the tooltip. Leave empty to use the default color defined by your template.
Link Color The color of links in the tooltip. Leave empty to use the default color defined by your template.
Background Color Title The color of the background of the tooltip title. Leave empty to use the default color defined by your template.
Background Color The color of the background of the tooltip. Leave empty to use the default color defined by your template.
Border Color The color of the border of the tooltip. Leave empty to use the default color defined by your template.
Maximum Width Set the maximum width of the tooltip.

This will not effect tooltips with larger images. The tooltip will resize to the image width.
z-index Enter the z-index of the tooltip element. Change this to a higher value if you have problems with other elements overlapping it.

Behaviour Pro only

Mode Select whether the tooltips should show on mouse click or hover.
With the sticky mode, the tooltip will show on hover and hide on click or timeout.
Options: Hover, Sticky, Click
Hide Delay With Hover Mode: The delay in milliseconds. Set to 0 for no delay.
Hide Delay Touchscreens With Hover Mode: The delay in milliseconds. Set to 0 for no delay.
Use Timeout With Click or Sticky Mode: Select to use a timeout after which the tooltip should hide.
Timeout Set the timeout (in milliseconds) after which the tooltip should hide. The timeout is reset when hovering over the link or tooltip.
Position Select the position of the tooltip relative to the link.
Options: Left, Right, Top, Bottom
Use auto-positioning Select to make the tooltip show in a different position when there is not enough room in the default position.
Fallback position The fallback position to use when there is not enough room in all positions.

Editor Button Options

Button Text This text will be shown in the Editor Button.
Enable in frontend If enabled, it will also be available in the frontend.
Use Simple Button Select to use a simple insert button, that simply inserts some example syntax into the editor.
Use Custom Code If selected, the Editor Button will insert the given custom code instead.
Custom Code Enter the code the Editor Button should insert into the content (instead of the default code).

Tag Syntax

Tooltips Tag The word to be used in the tags.
Note: If you change this, all existing tags will not work anymore.
Tag Characters The surrounding characters of the tag syntax.
Note: If you change this, all existing tags will not work anymore.
Options: {...}, [...], {{...}}, [[...]], [:...:], [%...%]

Advanced

Disable on Components Select in which frontend components NOT to enable the use of this extension.
Remove in Disabled Components If selected, the plugin syntax will get removed from the component. If not, the original plugins syntax will remain intact.
Enable in administrator If enabled, the plugin will also work in the administrator side of the website.

Normally you will not need this. And it can cause unwanted effects, like slowing down the administrator and the plugin tags being handled in areas you don't want it.
Place HTML comments By default HTML comments are placed around the output of this extension.
These comments can help you troubleshoot when you don't get the output you expect.
If you prefer to not have these comments in your HTML output, turn this option off.
Use Media Versioning Select to add the extension version number to the end of media (js/css) urls, to make browsers force load the correct file.
Load Bootstrap Framework Disable to not initiate the Bootstrap Framework.

Tooltips needs the Bootstrap Framework to function. Make sure your template or other extensions load the necessary scripts to replace the required functionality.

Installation

You can either install Tooltips by using the core extension manager available in the Joomla! Administrator Control Panel, or by using the powerful Regular Labs Extension Manager.

Note: When updating Tooltips, you do not need to uninstall it first. The package will update all the files automatically.

Keep in mind that when you update to a major new version (or uninstall first), you might lose some configuration settings.

Regular Labs Extension Manager

It is very easy to install/update any Regular Labs Extension using the Regular Labs Extension Manager.

Please see the Tutorial for the Regular Labs Extension Manager for more detailed information...

Joomla! Extension Manager

To install via the Joomla! Extension Manager, just follow these steps:

  1. Log into your Joomla administrator;
  2. In the menu, choose: Extensions >> Extensions;
  3. Choose the tab: Install from Web (or enable it if you haven't done so yet);
  4. Select the search field and enter Tooltips and hit enter;
  5. Click on the Tooltips listing;
  6. Click on Install;
  7. Click on Install to confirm.
Joomla! Installer - Install from Web

Or if you need to install the Pro version or cannot install via the 'Install via Web' method for some reason:

  1. Download the extension install file (.zip);
  2. Log into your Joomla administrator;
  3. In the menu, choose: Extensions >> Extensions;
  4. Choose the tab: Upload Package File;
  5. Click on the Choose File button and select the extension zip;
  6. Click on Upload & Install.
Joomla! Installer - Upload Package File

If you have problems installing Tooltips, please try the manual installation process as described here: docs.joomla.org/Installing_an_extension