JU Tooltip

Pellentesque metus leo, volutpat et dictum eleifend, aliquam quis velit. Tooltip here malesuada nibh. Nulla nec tellus massa, non accumsan urna. Nullam non tellus at nisi posuere luctus in sit amet tortor. Pellentesque et purus a ligula dapibus tincidunt. Integer eleifend, velit adipiscing consequat ullamcorper, massa tellus gravida turpis, sed porta nisi ante sit amet metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

 

Hover me

Manual html tag next the tooltip will be display as tooltip. You can use HTML tag here!

Nulla ut lacus ac leo sodales iaculis fermentum sit amet enim. Vivamus venenatis blandit turpis laoreet volutpat. Nullam nec turpis nulla, quis rutrum massa? Cras rhoncus nunc sem. Morbi posuere, massa in placerat porttitor, diam tortor viverra lectus, non porttitor dui felis eu odio. Morbi scelerisque, felis non pharetra porttitor, lectus orci lobortis risus, eget malesuada dui odio a orci?


 

 

JU Tooltip Plugin

Features:
Load tooltip for any element.

Usage Instructions:
Requirements: Joomla! 2.5.x, Joomla! 3.0.x
This module require jQuery javascript library to work. If jQuery has not been loaded on your site, you should install Plugin JU Load jQuery.

Add class="jutooltip" title="your tooltip content" for the html tag you want to display tooltip.

Example:

  1. 1. Load tooltip from title attribute. HTML: <a class="jutooltip" title="This is my tooltip">Hover me</a>
  2. 2. Load manual html tooltip, by don't set title attribute then use content of next tag as tooltip. By this way, you can use any html for tooltip. HTML: <a class="jutooltip">Hover me</a> <div style="display: none;">Manual <b>html tag</b> next the <strong>tooltip</strong> will be display as tooltip</div>
  3. 3. Use single tooltip for multi trigger elements, by this way, you can re-format html for tooltip use defined id/class CSS. For example, if you set Single tooltip: .myredtip. HTML: <a class="jutooltip" title="This is my tooltip">Hover me</a><div class="myredtip">Title attribute will be loaded here, you can use class myredtip to re-format this tag</div>