Hover me to open tooltip

[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

  1. Description
  2. Options
  3. Links within tooltips
  4. Reference element


This shortcode allows you to create colorful tooltips on almost any element. The tooltip can be shown on mouse over or on click.


titleTitle of the tooltip. Use empty value to hide the title. Supports nested shortcodes (learn more)
textContent of the tooltip. Supports nested shortcodes (learn more)

Default value: Tooltip content
positionTooltip position. The position of the tooltip may be automatically adjusted depending on the size of the browser viewport and scroll

Possible values:

Default value: top
backgroundTooltip background color

Possible values: #HEX color

Default value: #222222
colorTooltip text color

Possible values: #HEX color

Default value: #FFFFFF
font_sizeThe 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_alignThe alignment of the tooltip content

Possible values: left, center, right

Default value: left
max_widthThe maximum width of the tooltip, in pixels

Possible values: Number from 10 to 1000

Default value: 300
radiusThe radius of the tooltip corners, in pixels. Use 0 to make corners square

Possible values: Number from 0 to 20

Default value: 5
shadowThis option enables tooltip shadow

Possible values: yes or no

Default value: no
behaviorThis option determines how the tooltip will be opened

Possible values: hover, click, always

Default value: hover
classAdditional CSS class name(s) separated by space(s)
outlineThis 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.
tabindexThis 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_tagThis 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_heightLine height of the tooltip content. Default value is 1.25.
hide_delayThe 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_indexThis 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.

You can easily add a link within a tooltip. This combination has the following requirements:

See an example code below.

Show tooltip with a link

[su_tooltip text='Tooltip content.<br><a href="" 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]

Reference element

Reference element is that triggers the tooltip.

🤝 Thank you!