Tutorial:
Tooltips is based on the Bootstrap tabs functionality. So Tooltips uses and needs the Bootstrap framework (styles and scripts).
This means that Tooltips will only function correctly if your Joomla 3 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 (and editor button plugin) that allows you to display information to your visitors, that may be text or an image, without taking the user away from the current location in the site.

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.

The syntax for a simple tooltip looks like this:
This text has a tooltip

{tip content="This is the text in the tooltip"}This text has a 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 the text in the tooltip}This text has a tooltip{/tip}

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

{tip title="Tooltip Title" content="This is the text in the tooltip"}This text has a tooltip{/tip}

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

{tip title="Tooltip Title"}This text has a tooltip{/tip}

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

You can also give images a tooltip, and even place images inside the tooltip text.

 

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.

Examples

Tooltip with a title and text

Hover here to see tooltip

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

Tooltip with only text

Hover here to see tooltip

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

Or:

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

Tooltip with only a title

Hover here to see tooltip

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

Tooltip with rich text

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 even make images show in the tooltips and use this - for example - as a gallery:

The syntax

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

You can then use the image parameters to define the image for inside the tooltip.

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

You can also simply place the large images right inside the content parameters using your editor.

{tip content=""}{/tip} {tip content="<img src="/images/fruit/banana.jpg" height="150" width="200" alt="" />"}{/tip} {tip content="<img src="/images/fruit/blueberry.jpg" height="150" width="200" alt="" />"}{/tip} {tip content="<img src="/images/fruit/strawberry.jpg" height="150" width="200" alt="" />"}{/tip} {tip content="<img src="/images/fruit/orange.jpg" height="150" width="200" alt="" />"}{/tip} {tip content="<img src="/images/fruit/lime.jpg" height="150" width="200" alt="" />"}{/tip}

Or place the html in the content parameters, instead of the large images. However, that can get a little confusing, as you get weird nested quotes:

{tip content="<img src="/images/fruit/apple.jpg" height="150" width="200" />"}{/tip} {tip content="<img src="/images/fruit/banana.jpg" height="150" width="200" />"}{/tip} {tip content="<img src="/images/fruit/blueberry.jpg" height="150" width="200" />"}{/tip} {tip content="<img src="/images/fruit/strawberry.jpg" height="150" width="200" />"}{/tip} {tip content="<img src="/images/fruit/orange.jpg" height="150" width="200" />"}{/tip} {tip content="<img src="/images/fruit/lime.jpg" height="150" width="200" />"}{/tip}

Styling

Custom Styling

The default tooltip styling is based on the tooltips used in the Joomla administrator, with the addition of some CSS3 styles like border radius and a shadow.

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 no border radius and no padding.

If you have sufficient CSS knowledge you can fully customize the styling of the tooltips.

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

Please note that the css in the style.min.css is compressed (minified). To get the not-minified css, look in the style.css. Also the original LESS files are included in the /media/tooltips/less folder.

Individually styled tooltips

The tooltips - by default - have a tasteful and neutral styling.

To add an extra class to a tooltips (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

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

blue | green | orange | red | gray / grey

{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

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.

My custom styled tooltip

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

Positioning Pro only

In the Pro version of Tooltips you have the option to set the positioning of the tooltips.

There is a global option that will affect all tooltips. But you can also overrule this in the {tip} tag. You can just add a position parameter with the value left, right, top or bottom.

Left
Right
Top
Bottom

{tip title="Tooltip Title" content="Tooltip text..." position="left"}Left{/tip}
{tip title="Tooltip Title" content="Tooltip text..." position="right"}Right{/tip}
{tip title="Tooltip Title" content="Tooltip text..." position="top"}Top{/tip}
{tip title="Tooltip Title" content="Tooltip text..." position="bottom"}Bottom{/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, or overrule it via the mode parameter in the tag: Click here to see tooltip

{tip content="This is a tooltip!" mode="click"}Click here to see tooltip{/tip}

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

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

Options: No, Yes, Dotted, Dashed
Underline Colour The colour of the underline of the tooltip link

Tooltip

Title Colour The colour of the text in the tooltip title. Leave empty to use the default colour defined by your template.
Text Colour The colour of the text in the tooltip. Leave empty to use the default colour defined by your template.
Link Colour The colour of links in the tooltip. Leave empty to use the default colour defined by your template.
Background Colour Title The colour of the background of the tooltip title. Leave empty to use the default colour defined by your template.
Background Colour The colour of the background of the tooltip. Leave empty to use the default colour defined by your template.
Border Colour The colour of the border of the tooltip. Leave empty to use the default colour 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

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 The delay in milliseconds. Set to 0 for no delay.
Hide Delay Touchscreens The delay in milliseconds. Set to 0 for no delay.
Use Timeout 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.

Advanced Settings

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: {...}, [...], {{...}}, [[...]], [:...:], [%...%]
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.
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.

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

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).
FAQs:

The {tip} tags are not being converted

The Tooltips plugin is not published

Check if the Tooltips plugin is published. Go to Extensions >> Plugin manager and search for the system plugin System - Regular Labs - Tooltips. Then publish it.

There is markup on the {tip} tags

It is fine to give styles to the title and text within the {tip} tags, like: {tip My Title}
But giving styles to other parts of the tag, or the entire tag, can cause problems, like: {tip My Title}

If you have copy/pasted code directly into your editor, you might also have copied along hidden HTML tags. So this will also cause the {tip} tags to break:

{<span>tip</span> ...}

Remove the extra styling or other html tags around and in the {tip} tags that might cause problems.

Tips are not working on all browsers

There are javascript errors

Javascript errors might and usually will cause the tips to disfunction. You probably have a Mootools or jQuery conflict on your site. This often happens if multiple Mootools or jQuery scripts are loaded.

Take a look in the sites output html (ctrl-u) to check this.

For more details about the javascript error(s), you can use Firefox with the Web Developer Toolbar, Inspect Element console in Chrome, or any other browser with a javascript debugger.

Tips are not working on Internet Explorer (but are working on other browsers)

There are problems in the html output structure of your website

Internet Explorer is pretty picky when it comes to html. It will not handle invalid markup gracefully.

Check if you have unclosed html tags in your content (see the html view in your editor), like divs or spans that have no closing tag, or lost closing tags without opening tag.

You can check your page for html errors on: http://validator.w3.org

Will Tooltips work with a Bootstrap 4 template?

Tooltips (and Tabs and Slider) use and rely on the jQuery and Bootstrap scripts (and partially css) that comes with Joomla core.
So that is jQuery v1.12.4 and Bootstrap v2.3.2.

Bootstrap has basic tooltip, tab and accordion (slider) functionality which these Regular Labs extensions extend.

Many of the newer templates (especially the framework guys) do not use what comes with Joomla and load their own versions of jQuery and Bootstrap.

With Bootstrap 3 pretty much everything keeps working. You might need to tweak some styling.

With Bootstrap 4 the javascripts and the tab and accordion functionality has changed, causing stuff based on the older versions of Bootstrap to fail.
In some cases you can 'fix' things by overriding css to force stuff to hide/display based on different classnames than the 'active' class, for instance.
But in other cases - especially when the template loads extra scripts further changing the Bootstrap functionality - it is not an easy fix.
Then you would either need to write custom javascript to over-override functionality. Or just accept that it is incompatible and look for a different solution.

There are no plans to change the reliance on Bootstrap 2 (which comes with Joomla core) in my extensions. At least not for the Joomla 3 stuff.
There are possibly plans to rewrite these 3 javascript based extensions entirely for Joomla 4, making them no longer reliant on either Bootstrap or jQuery.
Doing so will mean that updating Joomla 3 to Joomla 4 will probably break Tooltips, as the scripts and css styling will be completely different.

Free vs Pro:

Create fabulous tooltips::You can create tooltips virtually anywhere you can enter text. So also in modules and other components
Many styling options::Tooltips is packed with ready-to-use styling options
Fully styleable through CSS::For full control over the way the tabs are styled, you can use CSS. All Tooltips elements have sufficient classnames to style it any way you want.

Position::Set the positions of the tooltip relative to the link. So top, bottom, left or right.
Auto-positioning::Make the tooltip show in a different position when there is not enough room in the default position.
Click mode::Make the tooltips appear (and disappear) on mouse click instead of hover.

Examples:

You can find a multitude of examples on the dedicated Tooltips Demo Page.

Visit the Demo Page >>>

Display text or an image to your users when they hover their mouse pointer over an item, without clicking it, by using Tooltips.

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: 

See the Tutorial and the Demo for more amazing features!

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: Tabs relies on the Bootstrap 2 styles and scripts that come with Joomla. If your template overrides this with it's own version of Bootstrap, then chances are this will cause conflicts and is not compatible.