User Guide

Tooltips

Download Free Buy Pro   € 10

1) What is Tooltips?

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.

2) Joomla 2.5 vs Joomla 3

There is a big difference in the Tooltips version for Joomla 2.5 and Joomla 3. Not only in the way it looks, but also in functionality.

The Joomla 2.5 version of Tooltips is based on the tips functionality of Mootools (which comes with Joomla 2.5 core).

The Joomla 3 version of Tooltips is based on the popover functionality of Bootstrap (which comes with Joomla 3 core).

The examples on this site are based on the Joomla 2.5 version. To see the Joomla 3 version in action, see the Demo.

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

To create a tootlip with a title, use a ‘::’ between the tooltip title and text, like:
This text has a tooltip

{tip Tooltip Title::This is the text in the tooltip}This text has a tooltip{/tip}

To create a tootlip with ONLY a title,  just place the ‘::’ after the tooltip title like:
This text has a tooltip

{tip 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.

4) 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.

5) Examples

Tooltip with a title and text

Hover here to see tooltip

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

Tooltip with only text

Hover here to see tooltip

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

Tooltip with only a title

Hover here to see tooltip

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

Tooltip with rich text

Hover here to see tooltip

{tip 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:

{tip }{/tip} {tip }{/tip} {tip }{/tip} {tip }{/tip} {tip }{/tip} {tip }{/tip}

Or simply place the html in the {tip} tags, instead of the large images, like:

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

6) 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 afully 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.

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

Joomla 3 version

J3 ONLY

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.
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.
Background Colour The colour of the background of the tooltip.
Border Colour The colour of the border of the tooltip.
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.
Position Select the position of the tooltip relative to the link.

Advanced Options

Tooltips Tag Tag Syntax:
The word to be used in the tags.

Note: If you change this, all existing tags will not work anymore.
Load Bootstrap Framework Disable to not initiate the Bootstrap Framework.

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

Joomla 2.5 version

J2.5 ONLY

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

Underline Select how to underline the tooltip link. This will not underline linked images.
Underline Colour The colour of the underline of the tooltip link

Tooltip

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 The colour of the background of the tooltip.
Border Colour The colour of the border of the tooltip.
Border Width The width (in pixels) of the border of the tooltip.
Use Rounded Corners Select to give the tooltip a rounded corners. Only works on CSS3 compatible browsers.
Border Radius The radius (in pixels) of the rounded corners of the tooltip. Only works on CSS3 compatible browsers.
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

Offset (horizontal) Set the offset of the tooltip on pixels
Offset (vertical) Set the offset of the tooltip on pixels
Fixed If selected, the tooltip will not follow the mouse.
Sticky If selected, the tooltip will hide when the mouse is clicked. Otherwise the tooltip will hide when the mouse exits the link.

Show PRO ONLY

Delay The delay in milliseconds. Set to 0 for no delay.
Fade Speed The speed of the fade effect in milliseconds. Set to 0 for no effect.

Hide PRO ONLY

Delay The delay in milliseconds. Set to 0 for no delay.
Fade Speed The speed of the fade effect in milliseconds. Set to 0 for no effect.

Advanced Options

Tag Syntax

Tooltips Tag The word to be used in the tags.

Note: If you change this, all existing tags will not work anymore.

Editor Button Options

Button Text This text will be shown in the Editor Button.
Show Button Icon If selected, the icon will be displayed in the Editor Button.
Enable in frontend If enabled, it will also be available in the frontend.
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).

8) Requirements

Tooltips will only work correctly if your setup meets these requirements:

  • Up-to-date version of Joomla:
    • Joomla 2.5.10 or higher
    • Joomla 3.2.2 or higher
  • PHP 5.3+ ( No PHP 5.2 support! )
  • PHP mbstring (Multibyte String) functions enabled
  • MySQL 5+

Important: I can only provide support for setups that:

  • meet the above requirements;
  • do not have extension files or Joomla! core files which have been altered in any way.

9) Installation

You can either install Tooltips by using the core extension manager available in the Joomla! Administrator Control Panel, or by using the powerful NoNumber 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.

9.1) NoNumber Extension Manager

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

Please see the User Guide for the NoNumber Extension Manager for more detailed information...

NoNumber Extension Manager

9.2) Joomla! Extension Manager

To install via the Joomla! Extension Manager, just follow these steps (based on Joomla 2.5 setup):

  1. Download the extension zip.
  2. Log into your Joomla administrator
  3. In the menu, choose: Extensions >> Extension Manager
  4. Under 'Upload Package File' select the extension zip.
  5. Click on 'Upload & Install'
Joomla! Installer

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

10) Uninstallation

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

If you no longer use any NoNumber extensions, you can also uninstall the NoNumber Framework plugin by using the Joomla! core extension manager.

Quick Menu

Peter van Westen

Hosted by

SiteGround.com