[su_tooltip title="Tooltip title" text="Tooltip content" position="top" background="#222222" color="#FFFFFF" font_size="16" text_align="left" max_width="300" radius="5" shadow="no" behavior="hover" class="" outline="yes" tabindex="yes" reference_tag="span" hide_delay="0"] Hover me to open tooltip [/su_tooltip]
Table of contents
This shortcode allows you to create colorful tooltips on almost any element. The tooltip can be shown on mouse over or on click.
This shortcode has been redesigned in the plugin version 5.10.0
. Please report all found bugs on the support forum.
Title of the tooltip. Leave the value empty to hide the title. Supports nested shortcodes (learn more).
Content of the tooltip. Supports nested shortcodes (learn more).
Tooltip position. The position of the tooltip may be automatically adjusted depending on the size of the browser viewport and scroll. Default value: top
. Possible values are: top
, right
, bottom
, and left
.
Tooltip background color. Default value: #222222
. Supports almost any CSS colors, including:
yellow
, green
, etc.;#333333
, #333
.Semi-transparent colors are not supported. For example, you cannot use a value like rgba(255, 255, 255, 0.5)
.
Tooltip text color. Default value: #FFFFFF
. Supports any CSS colors, including semi-transparent ones. Examples:
yellow
, green
, etc.;#333333
, #333
;rgba(255, 64, 255, 0.5)
.The font size of the tooltip title/content, in pixels. This parameter also affects the padding of the tooltip. Default value: 16
. Possible values: numbers from 10
to 24
.
You can use custom CSS units to set the font size. For example: 1em
or 1rem
.
The alignment of the tooltip content. Default value: left
. Possible values are: left
, center
, and right
.
The maximum width of the tooltip, in pixels. Default value: 300
.
You can use custom CSS units to set the maximum width. For example: 30vw
(30% of the viewport width).
The radius of the tooltip corners, in pixels. Set the value to 0
to make corners square. Default value: 5
. Possible values: numbers from 0
to 20
.
This option enables the tooltip shadow. Default value: no
. Possible values are: no
and yes
.
This option determines how the tooltip will be opened. Default value: hover
. Possible values are:
hover
– show and hide the tooltip on mouse overclick
– show and hide the tooltip on clickalways
– the tooltip is always visible and cannot be hiddenAdditional CSS class names separated by spaces
This option allow disabling outline of the reference element when it’s focused. Default value: yes
which means the outline will be visible. Possible values are yes
and no
. Disabling of the outline is strongly discouraged, since it makes keyboard navigation a poor experience. Reference element is an element which you hover/click to display the tooltip.
This option enables the tabindex
attribute on the reference element to make it accessible from keyboard. Default value is yes
which means the tabindex="0"
will be added to the tooltip reference element. Possible values are yes
and no
. Disable this is strongly discouraged, since it will make your tooltip content not accessible from keyboard.
This option defines the reference element tag name. Default value is span
. Possible values are HTML tag names, like em
, strong
and so on. It’s not recommended to use names of block-level elements, like div
.
Line height of the tooltip content. Default value is 1.25
.
The delay before closing the tooltip, in milliseconds. This parameter can be used to allow users to click links within the open tooltip. Example:
[su_tooltip text="Some content.<br><a href='#'>Learn more</a>" behavior="click" hide_delay="500"] Click here to open tooltip with a link [/su_tooltip]
This option allows you to adjust the value of the z-index property for the tooltip element. Can be useful if a tooltip is hidden behind some element on your page. Default value is 100
.
Reference element is an element which you hover/click to display the tooltip.