This shortcode allows you to create colourful tooltips on almost any elements. Tooltip could be displayed on hover or on click.

Hover me to open tooltip. Click me to open tooltip.

[su_tooltip style="yellow" position="top" title="Tooltip title" content="Tooltip text"]Hover me to open tooltip[/su_tooltip]. [su_tooltip style="yellow" behavior="click" close="yes" position="top" title="Tooltip title" content="Tooltip text"]Click me to open tooltip[/su_tooltip].
Option name Possible values Default 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 no no
rounded
Use rounded for tooltip. This option is only works with basic styes, e.g. blue, green etc.
yes or no no
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 value Tooltip 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 no no
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)

none