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
    1. title
    2. text
    3. position
    4. background
    5. color
    6. font_size
    7. text_align
    8. max_width
    9. radius
    10. shadow
    11. behavior
    12. class
    13. outline
    14. tabindex
    15. reference_tag
    16. line_height
    17. hide_delay
    18. z_index
  3. 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.

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:

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:


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:


Additional 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:

Click here to open tooltip with a link

[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

Reference element is an element which you hover/click to display the tooltip.

🤝 Thank you!