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.

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.

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

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. 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" is not applicable, as tooltips stay open as long mouse pointer is within tooltip or points at target (or you may use parameter "openonclick" instead, then tips open/close only if target clicked).
  • 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.
jmootips with Bootstrap is incompatible with javascript library "mootools-more.js". If you need this library you should not use Bootstrap - instead use the Mootools javascript framework.

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.

jmootips will not run correctly, if you use the Bootraps Framework together with javascript libray "mootools-more.js". Either switch to Mootools Framwork or ensure that "mootools-more.js" is not used..

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.0 for Joomla!

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

 

   

Visitors  

Germany 16.1% Germany
United States 9.1% United States
France 4.7% France
Russia 4.5% Russia
India 4.2% India
Italy 4.1% Italy
Indonesia 3.6% Indonesia
Spain 3.0% Spain
Poland 2.7% Poland
Brazil 2.6% Brazil
Netherlands 2.3% Netherlands
Total:   166  countries

0063346

Today: 7
Yesterday: 38
This Week: 273
Last Week: 293
This Month: 1,161
Last Month: 1,526
   

Who is online  

We have 111 guests and no members online

   
© 2012 - Joachim Schmidt Systemberatung. Alle Rechte vorbehalten