This shortcode allows you to create colorful tooltips on almost any element. The tooltip can be shown on mouse over or on click.
Options
title
Title of the tooltip. Use empty value to hide the title. Supports nested shortcodes (learn more)
text
Content of the tooltip. Supports nested shortcodes (learn more)
Default value:Tooltip content
position
Tooltip position. The position of the tooltip may be automatically adjusted depending on the size of the browser viewport and scroll
Possible values: top bottom left right
Default value:top
background
Tooltip background color
Possible values: #HEX color
Default value:#222222
color
Tooltip text color
Possible values: #HEX color
Default value:#FFFFFF
font_size
The font size of the tooltip title/content, in pixels. This parameter also affects the padding of the tooltip.
Possible values: Number from 10 to 24
Default value:16
text_align
The alignment of the tooltip content
Possible values:left, center, right
Default value:left
max_width
The maximum width of the tooltip, in pixels
Possible values: Number from 10 to 1000
Default value:300
radius
The radius of the tooltip corners, in pixels. Use 0 to make corners square
Possible values: Number from 0 to 20
Default value:5
shadow
This option enables tooltip shadow
Possible values:yes or no
Default value:no
behavior
This option determines how the tooltip will be opened
Possible values:hover, click, always
Default value:hover
class
Additional CSS class name(s) separated by space(s)
outline
This option allows you to disable the 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.
tabindex
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.
reference_tag
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
Line height of the tooltip content. Default value is 1.25.
hide_delay
The delay before closing the tooltip, in milliseconds. This parameter can be used to allow users to click links within the open tooltip. See an example below.
z_index
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.
Links within tooltips
You can easily add a link within a tooltip. This combination has the following requirements:
You’ll need to replace double quotes of the shortcode with single quotes (" > ')
Tooltip with a link can only use the following values for the behavior attribute: always, click
You’ll need to add a hide_delay greater than 0
See an example code below.
Show tooltip with a link Tooltip content.<br><a href="https://example.com/" target="_blank" rel="noopener">Learn more</a>
[su_tooltip text='Tooltip content.<br><a href="https://example.com/" target="_blank" rel="noopener">Learn more</a>' behavior='click' position='bottom' background='#ffffff' color='#000000' font_size='14' shadow='yes' hide_delay='1000'] Show tooltip with a link [/su_tooltip]