Joomla Tutorial

New to Joomla?
check out our Joomla Tutorial page.

HoverBot Tutorial PDF Print E-mail

To use HoverBot plugin, you have to install the plugin, configure and enable it first. Then, you can have "{hoverbot hover_text} hover_over_text{/hoverbot}" in your article to have the hover over effect. Hover_text is the HTML code that you want to have hover over effect. Hover_over_text is the HTML code that you want to display when the mouse is hovering over the hover_text. Please NOTE, the text MUST be in plain text, with no formatting, such as bold or italic. Examples below will have the text in bold to prevent the text being rendered.

Use the Extension

Dynamic Parameters

Demo

ScreenShot

To enable this plugin:

Install the bot, configure it and then publish it.

 You can config the default bot behaviors using Joomla plugin configuration screen.

when placing the bot in the content, you can use{hoverbot hover_text} hover_over_text{/hoverbot}

Parameters are separated by comma, without any space in between. When setting email address in parameter, please remove any HTML tags around the email address added by Joomla.

Dynamic parameters:

hover_text
Hover_text is the HTML code that you want to have hover over effect.
Hover_over_text Hover_over_text is the HTML code that you want to display when the mouse is hovering over the hover_text.
aordiv aordiv is used to control whether to use A tag or DIV tag for the hover text.
backcolor backcolor is the background color, default value is light yellow.
border border determines the border style, default value is 1px dashed gray.

Demo:

make sure plugin is in plain text, with no formatting. Examples below has "hoverbot" in bold.

{hoverbot text}This is a hover over text{/hoverbot}

textThis is a hover over text

{hoverbot HyBing}<img src="images/logo.png" border="0" />{/hoverbot}

HyBing

{hoverbot <img src="http://ichart.finance.yahoo.com/t?s=YHOO" border="0" width="192" height="96" />}<img src="http://ichart.finance.yahoo.com/t?s=YHOO" border="0" width="384" height="192" />{/hoverbot}