Add a tooltip to any article, category or section content and this plugin can display any html content and even other modules (e.g. Login form, latest news modules, custom module). This is really useful for when a user hovers over linked text or an image (for example "Login here") and the tooltip displays the Login form in a tooltip window.
If you use Qlue Tooltip, please post a rating and a review at the Joomla! Extensions Directory
Default Tooltip
Here is an example of the tooltip in its default. To load a Qlue tooltip inside of your content you would need this basic syntax:
{qluetip title=[Hover here to see tooltip]} This is some tooltip content {/qluetip}
Span Tooltip
Here is an example of the tooltip text inside a span tag: Hover here to see tooltip. To wrap the text inside a span tag you would need this basic syntax:
{qluetip title=[Hover here to see tooltip] element=[span] } This tooltip rollover text is wrapped inside a span tag {/qluetip}
Tooltip with Image
Here is an example of the tooltip working when hovering over an image:
{qluetip title=[<img alt="Qlue" src="/images/logo.jpg" height="50" width="76" />] } This is some tooltip content {/qluetip}
Sticky Tooltip
Above is an example of the tooltip set to stick. To make the tooltip stick you will need this syntax:
{qluetip title=[Hover here to see tooltip] sticky=[1] } This is some tooltip content {/qluetip}
Load Module
Above is an example of the tooltip loading a module. To load a module inside of your tooltip you just need to add "mod=[module position]" to the plugin syntax. Below is the syntax to load my module in the position "login":
{qluetip title=[Hover here to see tooltip] sticky=[1] mod=[login]} This is some tooltip content beneath the module {/qluetip}
Duration
Above is an example of the tooltip loading slower. To change the duration of your tooltip you will need this syntax:
{qluetip title=[Hover here to see tooltip] duration=[600]} This is some tooltip content beneath the module {/qluetip}
Width
Above is an example of the tooltip being set to a wider width. To change the width of your tooltip you would need this syntax:
{qluetip title=[Hover here to see tooltip] width=[500]} This tooltip has been stretched to 500px {/qluetip}
Custom Class
Above is an example of the tooltip with a custom css class. To add a custom css class to your tooltip you will need this syntax:
{qluetip title=[Hover here to see tooltip] class=[cssClass]} This tooltip has a custom css class added {/qluetip}
