Hover me to open tooltip

[su_tooltip style="yellow" position="top" title="Tooltip title" content="Tooltip text"]Hover me to open tooltip[/su_tooltip]

Click me to open tooltip

[su_tooltip style="yellow" behavior="click" close="yes" position="top" title="Tooltip title" content="Tooltip text"]Click me to open tooltip[/su_tooltip]

Description

This shortcode allows you to create colorful tooltips on almost any element. The tooltip could be displayed on hover or on click.

Options

Option namePossible valuesDefault value
style
Tooltip window style
light (Basic: Light)
dark (Basic: Dark)
yellow (Basic: Yellow)
green (Basic: Green)
red (Basic: Red)
blue (Basic: Blue)
youtube (Youtube)
tipsy (Tipsy)
bootstrap (Bootstrap)
jtools (jTools)
tipped (Tipped)
cluetip (Cluetip)
yellow
position
Tooltip position
north (Top)
south (Bottom)
west (Left)
east (Right)
top
shadow
Add shadow to tooltip. This option is only works with basic styes, e.g. blue, green etc.
yes or nono
rounded
Use rounded for tooltip. This option is only works with basic styes, e.g. blue, green etc.
yes or nono
size
Tooltip font size
default (Default)
1 (1)
2 (2)
3 (3)
4 (4)
5 (5)
6 (6)
default
title
Enter title for tooltip window. Leave this field empty to hide the title
Any text value– none –
content
Enter tooltip content here
Any text valueTooltip text
behavior
Select tooltip behavior
hover (Show and hide on mouse hover)
click (Show and hide by mouse click)
always (Always visible)
hover
close
Show close button
yes or nono
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –