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

Description

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.

Options

title

Title of the tooltip. Leave the value empty to hide the title. Supports nested shortcodes (learn more).

text

Content of the tooltip. Supports nested shortcodes (learn more).

position

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.

background

Tooltip background color. Default value: #222222. Supports almost any CSS colors, including:

• CSS color names, like yellow, green, etc.;
• HEX colors. Examples: #333333, #333.

Semi-transparent colors are not supported. For example, you cannot use a value like rgba(255, 255, 255, 0.5).

color

Tooltip text color. Default value: #FFFFFF. Supports any CSS colors, including semi-transparent ones. Examples:

• CSS color names, like yellow, green, etc.;
• HEX colors. Examples: #333333, #333;
• RGBA colors. Example: rgba(255, 64, 255, 0.5).

font_size

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.

text_align

The alignment of the tooltip content. Default value: left. Possible values are: left, center, and right.

max_width

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).

radius

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.

shadow

This option enables the tooltip shadow. Default value: no. Possible values are: no and yes.

behavior

This option determines how the tooltip will be opened. Default value: hover. Possible values are:

• hover – show and hide the tooltip on mouse over
• click – show and hide the tooltip on click
• always – the tooltip is always visible and cannot be hidden

class

Additional CSS class names separated by spaces

outline

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.

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. 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]

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.

Reference element

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