jmootipsA tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item (which is often underlined), without clicking it, and a tooltip will appear - a small "hover box" with information about the item being hovered over

Joomla Plugin jmootips may help to design Joomla articles and their informations to be more attractive and informative. With this plugin you are able to deploy tooltips very easily and fill tooltip content from various sources. Additionally you may control position and layout of tooltips almost without any programming skills.

This article about jmootips not only shows the various options of functions and usage but uses itself jmootips to provide as much information as possible.

For the usage of tooltips it is vital, that it supports as many types of content as possible (e.g. text, HTML or images) and eases the use to include those. jmootips supports various types of content and may include content from various sources:

  • simple Text or HTML via Plugin Tags
  • content provided by local or remote Webserver
  • content from Joomla's arcticles
  • content via Ajax Request
  • images from local or remote sites

 

Installation

jmootips package contains two plugins:

  1. jmootips system plugin - With this plugin you will be able to create tooltips very easily
  2. tipbutton editors-xtd plugin - Displays an editor toolbar button to ease inserting tooltips into an article.
    It displays a popup allowing you to choose the tooltip article
The package is installed as any other Joomla extension via Admin Backend's "Extension Manager". Please ensure that both plugins are published. Also configure and check the provided javascript frameworks to be used by jmootips, Mootools or Bootstrap.

Note: With Release 1.2.0 the plugin type has been changed from content-plugin to system-plugin. If you have installed a previous version, this (content-) plugin will be disabled to ensure that only the new type is active. It is recommended to deinstall the old version.

 

Plugin Parameter

Creation of tooltips with "jmootips" is very easy and flexible. All possible options shown below are described and illustrated with samples:

Samples

Tooltip requested with parameter "text"

Same tip but now with a title "title":

Using "position" you will be able to place a tooltip below ("1" or "below"), above ("-1" or "above"), right ("-2" or "right") or left ("2" or "left") relative to target position.

Parameter "sticky" controls, wether a tooltip should be closed when the mouse pointer leaves target or tooltip popup ("-1" = default), or should stay open until its "close-button" has been clicked ("1")

Parameter "openonclick" controls, wether a tooltip should be opened if target has been clicked

With Parameter "id" you request content and title from a Joomla article which has been assigned this specific id (number)

Specifying Parameter "ajax4id" you now request content and title from an article containing a movie via ajax interface

If you request parameter "image" with a valid url, tooltip will show an image.

You may use a thumbnail and display it full sized with a Tooltip.

You may request tooltip content from local or remote hosts when you code parameter "url".

With parameter "ajax" jmootips will use the Ajax-interface of to dynamically request content from your local host.

Since realease 1.2.1 you may explicitly define width of a single tip. Use parameter width then jmootips will force size of tip to be limited to specified width. (here same tip without parameter "width"). Note, that width should not be greater than maximum width set by CSS-styling (default 500px) for tips.

Source (Syntax)

Tooltip requested with parameter {tip text="a very simple tip"}"text"{/tip}

Same tip but now with a title {tip text="a very simple tip" title="this is my Title"}"title": {/tip}

Using {tip text="this is another Tip" title="Position "below" " position="below"}"position" {/tip} you will be able to place a tooltip below ("1" or "below"), above ("-1" or "above"), right ("-2" or "right") or left ("2" or "left") relative to target position.

Parameter {tip text="this is a simple tip with close Button" title="Click Close Button" sticky="1"}"sticky" {/tip} controls, wether a tooltip should be closed when the mouse pointer leaves target or tooltip popup ("-1" = default), or should stay open until its "close-button" has been clicked ("1")

Parameter {tip id="162" openonclick="1"}"openonclick" {/tip} controls, wether a tooltip should be opened if target has been clicked

{tip id="104"}With Parameter "id" {/tip} you request content and title from a Joomla article which has been assigned this specific id (number)

Specifying {tip id="134" ajax4id="1" sticky="1"}Parameter "ajax4id"{/tip} you now request content and title from an article containing a movie via ajax interface

If you request parameter {tip image="/images/z10.png" title="IBM z/10 System"}"image"{/tip} with a valid url, tooltip will show an image.

You may use a thumbnail {tip id="174" position="-1"}<img style="vertical-align:top;margin: 5px;" src="/images/stories/mountains_thumb.jpg" width="50">;{/tip} and display it full sized with a tooltip.

You may request tooltip content from local or remote hosts when you code parameter {tip url="/index.php?option=com_content&tmpl=showcontact&id=2&lang=en" title="Webmaster" sticky="1"}"url"{/tip}.

With parameter {tip ajax="/plugins/system/jmootips/samples/direstraits-en.html" title="Dire Straits" sticky="1"}"ajax"{/tip} jmootips will use the Ajax-interface of to dynamically request content from your local host.

Since realease 1.2.1 you may explicitly define width of a single tip. {tip id="139" width="300" position="above"}Use parameter width{/tip} then jmootips will force size of tip to be limited to specified width.

Admin Backend

Plugin Parameters via Admin Backend

Via Joomla's Admin Backend you may define defaults for jmootips-plugin, control usage of "mootools javascript frameworks" or change tooltip styling interface. To change the defaults go to "plugin manager" in your administrator backend and select "jmootips system plugin".
(Move mouse pointer into image below to get additional information).

  • Layout of tooltips (background color, font size,... etc) will be set by CSS-class "jmootips". Here you may specify your own class - note that this class must exist and be provided in CSS-Files (Style Sheets), which Joomla can access.
  • If you want to use your own style-sheets (CSS-Files) for tooltip styles, you may switch off including jmootips' style-sheets.
  • With "Close Tooltip" you may set the default behaviour of tooltips (close if mouse moves out target/tip or stay open).
  • Option "Open with Mouseclick" controls wether tooltip will open with a mouseclick or if mouse hovered over target.
  • "Position of Tooltips" sets the default position relative to target.
  • If you have requested content for tooltip to come from an Joomla article with parameter "id", jmootips will include this content into the current article directly or with "Use AJAX for Articles" set to "Yes" will only retrieve content, if you hover with the mouse over the target.
  • With Version 1.1. of jmootips you may use Twitter's Bootstrap Javascript Framework instead of Mootools
  • If you want to use Mootools Javascript Framework, jmootips needs Joomla's javascript library "motools-core.js" (and with Jooomla Version 3 "mootools-more-jmootips.js").
    With "Add Mootools Libraries" you control, wether no Lib, both Libs or only "mootools-more-jmootips.js" (which is a customized 6k bytes mootools-more library) should be included into current page.
  • If you do not want that tooltip content to be requested via url you must set "allow use of url" to "No" (this is the default). This parameter will affect parameter "url" and "ajax"
  • Requesting content from foreign systems should not be allowed. But if you trust your users with editor authority you may set parameter "Remote Host" to "Yes"

News

Release 1.2.1 introduces new parameter "width" in order to be able to set width of tip without coding CSS- or HTML-tags. Also new in this Realease is usage of last level (3.3.1) of bootstrap framework. Behaviour of tips using parameter "sticky" and bootstrap has been changed. Now tips will stay open until mouse pointer hovers out tip (not target).

With Build Level 1.2.0.9 a problem which may happen when re-editing articles via frontend has been fixed.

Build 1.2.0.8 fixes (besides others) a problem, which may happen when using Bootstrap framework for jmootips together with javascript-file "mootools-more.js".

Code of release 1.2.0 has been changed to use jmootips as a system-plugin. This change into a system plugin type supports the use of jmootips tooltip tags in Joomla! modules or components. You may see at the right column of this page how this new ability may be used by Joomla!'s banner component and by my visitor counter (hover mouse pointer over images).

Release 1.1.3 supports translations for sites which use Joomla! extension "Falang" to implement multilingual content.

With build level 1.1.2.3 javascripts have been extended to detect mobile devices or tablets. As such devices typically are using touch screens and therefore "mouse over" or "mouse leave" events are not applicable, "openonclick" attribute will be assigned to tooltips. If mootools javascript frameworks is used, additionally tooltips will have assigned attribute "sticky", so that tips may be closed if close button touched. With bootstrap javascript framework tips open/close if target touched.

Build level 1.1.2.9 sets centered tooltips arrows if tip is positioned above or below target (previous levels had a 55pixel offset to left side of tip).

 

Tips/FAQs

Organize Tooltips

Organize tooltips with Joomla articles

jmootips with its functionality to use Joomla articles for tooltip content, makes the deployment very flexible and easy. To setup a meaningful structure you should consider following:
  1. Create an own category for tooltips, e. g. name it "Tooltips"
  2. Create tooltip contents (articles) within this category
With wysiwyg editors (e.g. "JCE") a toolbar-button, "Tooltip", is available. This button is displayed if jmootips' "Editor Button Plugin" has been enabled. Using this Toolbar button makes it very easy to insert tooltip-tags into article text at cursor position.
Look at a small sample, which shows, how to edit tooltip content and then create/use it in an article.

Note:
You may only use articles for tooltips which have state "Published" and access level "Public".



Layout

Use own stylesheets (CSS)

If you want to use your own styles for tooltips, you should not change or edit jmootips' CSS-files as a software update may overwrite your changes. Better copy content from "../plugins/system/jmootips/jmootips.css" e. g. into one of your template's CSS-files and then change styles for your needs. To activate your changes you will have to set parameter "jmootips CSS File" via Admin Backend to "No".

Note:
Maximum width of a tooltip is defined in stylesheet of jmootips. You may now use parameter width to set widdth of a single tip. But you also may set width of a tooltip via Wysiwig-Editor (e. g. JCE) with CSS-style tool. Via this interface you may also change other layout parameters.


Bootstrap

Notes on Bootstrap

As you interprete its name, "jmootips" first aim was to use Mootools javascript framework to implement tooltips. With this new version you may now use a second framework: Bootstrap. Layout of tips is almost the same, but there are two differences using Bootstrap:
  • Parameter "sticky" causes tooltips to stay open until mouse pointer is leaving (hovers out) tip.
  • CSS class name "jspopover" is predefined and must not be changed to another name. Of course you may change any layout parameters (e.g. fonts, colors, etc.) for your needs.


Ajax

Use AJAX or do not use it?

Using AJAX interface has the advantage, that contents of tooltips are only loaded if a tooltip is requested. If you do not use AJAX interface all tooltip contents is loaded together with page. This has the advantage that all tooltip content is immediately available but will increase loading time of page. As tooltips typically are quite small compared to the size of requested page you may not see any big difference in loading time, so that it may not be worth while using AJAX interfaces.

Problems/Issues

Known Problems/Issues

If you are using AJAX-interface loading tooltip content and your site is multi lingual, you must either use tooltip content for a specific language or you assign language "All" for those tooltips, which are common for all languages.

As tooltip content may contain any kind of html-code and is stored within your displayed page it is very important that tooltips contain only clean html code, otherwise your page may not display correctly. For this reason as well ensure that users with editor-role are not able to insert code other than pure html. E. g. check/do:

  • configure editors to allow inserting only pure html code
  • if you cannot trust your users with editor rights disallow use of "url"
  • do not allow contents from foreign systems



Download jmootips

jmootips is free software (as is Joomla!) - however you have to adhere to the GPL-lincense conditions to use it. Please learn more about GPL and free software at GNU Org.

To download jmootips please click the download button:

downloadjmootips version 1.2.1 for Joomla!

Any Questions? Visit my Support forum for jmootips or send Email to me.

 

Visitors

Germany 16.6% Germany
United States 9.0% United States
Russia 4.7% Russia
France 4.3% France
Indonesia 4.2% Indonesia
India 4.0% India
Italy 4.0% Italy
Spain 2.9% Spain
Poland 2.7% Poland
Brazil 2.6% Brazil
Netherlands 2.3% Netherlands

Total:
 
171  countries

0070067
Today: 7
Yesterday: 145
This Week: 366
Last Week: 348
This Month: 995
Last Month: 1,389

Who is online

We have 11 guests and no members online