The YOOtooltip let's you create mouse over tooltips to your content and allows you to show additional information. YOOtooltip is Joomla plugin which is used inside your content.
Tooltip with sticky option:
Tooltip with text:
Tooltip with image:
Tooltip with HTML content:
Tooltip with width 300px:
Tooltip with width 400px:
Tooltip with width 500px:
Take a look at the documentation: How to set up the YOOtooltip? There is also a video tutorial available.
Sample Tooltips (white / black)
Hover here!
Tooltip with text:
Hover here!
Tooltip with image:
Hover here!
Tooltip with HTML content:
Hover here!
Tooltip with width 300px:
Hover here!
Tooltip with width 400px:
Hover here!
Tooltip with width 500px:
Hover here!
Syntax
Use the following syntax to create a YOOtooltip:
Syntax to set the sticky option: {yootooltip title=[Tooltip Link] sticky=[1]}Tooltip Content{/yootooltip}
Syntax using default width: {yootooltip title=[Tooltip Link] }Tooltip Content{/yootooltip}
Syntax to set a custom width: {yootooltip title=[Tooltip Link] width=[300]}Tooltip Content{/yootooltip}
Syntax to set the mode: {yootooltip title=[Tooltip Link] mode=[trigger]}Tooltip Content{/yootooltip}
Syntax to set the display parameter: {yootooltip title=[Tooltip Link] display=[block]}Tooltip Content{/yootooltip}
(The display option is used to define wether the tooltip trigger is a "inline" or "block" element. By default every trigger is a "inline" element. Tip: Use the "block" option when adding tooltips to div's which surround images.)
Syntax using default width: {yootooltip title=[Tooltip Link] }Tooltip Content{/yootooltip}
Syntax to set a custom width: {yootooltip title=[Tooltip Link] width=[300]}Tooltip Content{/yootooltip}
Syntax to set the mode: {yootooltip title=[Tooltip Link] mode=[trigger]}Tooltip Content{/yootooltip}
Syntax to set the display parameter: {yootooltip title=[Tooltip Link] display=[block]}Tooltip Content{/yootooltip}
(The display option is used to define wether the tooltip trigger is a "inline" or "block" element. By default every trigger is a "inline" element. Tip: Use the "block" option when adding tooltips to div's which surround images.)
Parameter Options
All parameter options for the YOOtooltip plugin.
Style
The YOOtooltip styling (Default)
Default Mode
The Tooltip default mode, defines where the Tooltip is displayed
Default Width (px)
Default Tooltip width in pixel, used when it is not set as Tooltip parameter
Sticky
Tooltip will stay open until close button is hovered
The YOOtooltip styling (Default)
Default Mode
The Tooltip default mode, defines where the Tooltip is displayed
Default Width (px)
Default Tooltip width in pixel, used when it is not set as Tooltip parameter
Sticky
Tooltip will stay open until close button is hovered