{"id":33947,"date":"2019-03-04T09:24:51","date_gmt":"2019-03-04T09:24:51","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=33947"},"modified":"2023-05-27T08:52:14","modified_gmt":"2023-05-27T08:52:14","slug":"tooltip","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/tooltip\/","title":{"rendered":"Tooltip"},"content":{"rendered":"
\n\t
\n\t\t

Hover me to open tooltip <\/span>Tooltip title<\/span>Tooltip content<\/span><\/span><\/span><\/span><\/p>\n\t<\/div>\n\t

\n\t\t
<\/pre>\n\t<\/div>\n<\/div>\n\n\n
Table of contents<\/p>\n\n
  1. Description<\/a><\/li>
  2. Options<\/a><\/li>
  3. Links within tooltips<\/a><\/li>
  4. Reference element<\/a><\/li><\/ol><\/li><\/ol>\n\n\n
    Description<\/h2>\n\n\n\n
    This shortcode allows you to create colorful tooltips on almost any element. The tooltip can be shown on mouse over or on click.<\/p>\n\n\n\n
    Options<\/h2>\n\n\n\n
    title<\/td>Title of the tooltip. Use empty value to hide the title. Supports nested shortcodes (learn more<\/a>)<\/td><\/tr>
    text<\/td>Content of the tooltip. Supports nested shortcodes (learn more<\/a>)

    Default value:<\/strong> Tooltip content<\/code><\/td><\/tr>
    position<\/td>Tooltip position. The position of the tooltip may be automatically adjusted depending on the size of the browser viewport and scroll

    Possible values:<\/strong>
    top<\/code>
    bottom<\/code>
    left<\/code>
    right<\/code>

    Default value:<\/strong> top<\/code><\/td><\/tr>
    background<\/td>Tooltip background color

    Possible values:<\/strong> #HEX color

    Default value:<\/strong> #222222<\/code><\/td><\/tr>
    color<\/td>Tooltip text color

    Possible values:<\/strong> #HEX color

    Default value:<\/strong> #FFFFFF<\/code><\/td><\/tr>
    font_size<\/td>The font size of the tooltip title\/content, in pixels. This parameter also affects the padding of the tooltip.

    Possible values:<\/strong> Number from 10 to 24

    Default value:<\/strong> 16<\/code><\/td><\/tr>
    text_align<\/td>The alignment of the tooltip content

    Possible values:<\/strong> left<\/code>, center<\/code>, right<\/code>

    Default value:<\/strong> left<\/code><\/td><\/tr>
    max_width<\/td>The maximum width of the tooltip, in pixels

    Possible values:<\/strong> Number from 10 to 1000

    Default value:<\/strong> 300<\/code><\/td><\/tr>
    radius<\/td>The radius of the tooltip corners, in pixels. Use 0 to make corners square

    Possible values:<\/strong> Number from 0 to 20

    Default value:<\/strong> 5<\/code><\/td><\/tr>
    shadow<\/td>This option enables tooltip shadow

    Possible values:<\/strong> yes<\/code> or no<\/code>

    Default value:<\/strong> no<\/code><\/td><\/tr>
    behavior<\/td>This option determines how the tooltip will be opened

    Possible values:<\/strong> hover<\/code>, click<\/code>, always<\/code>

    Default value:<\/strong> hover<\/code><\/td><\/tr>
    class<\/td>Additional CSS class name(s) separated by space(s)<\/td><\/tr>
    outline<\/td>This option allows you to disable the outline of the <\/a>reference element<\/a> when it’s focused. Default value: yes<\/code> which means the outline will be visible. Possible values are yes<\/code> and no<\/code>. 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.<\/td><\/tr>
    tabindex<\/td>This option enables the tabindex<\/code> attribute on the <\/a>reference element<\/a> to make it accessible from keyboard. Default value is yes<\/code> which means the tabindex=\"0\"<\/code> will be added to the tooltip reference element. Possible values are yes<\/code> and no<\/code>. Disable this is strongly discouraged, since it will make your tooltip content not accessible from keyboard.<\/td><\/tr>
    reference_tag<\/td>This option defines the reference element<\/a> tag name. Default value is span<\/code>. Possible values are HTML tag names, like em<\/code>, strong<\/code> and so on. It’s not recommended to use names of block-level elements, like div<\/code>.<\/td><\/tr>
    line_height<\/td>Line height of the tooltip content. Default value is 1.25<\/code>.<\/td><\/tr>
    hide_delay<\/td>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.<\/td><\/tr>
    z_index<\/td>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<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n