When to use
Tooltips are small boxes that appear when a user hovers over or clicks special icons on your page. Tooltips may enhance the usability of a page by helping contextualize content on your page.
Basic usage:
[tooltip message="Some tooltip text."]
By default, the tooltip will display a Font Awesome question-circle icon, and the tip will show when a user clicks the icon.
- Open the tooltip shortcode:
[tooltip - Add tooltip text using the
messageattribute and end the shortcode:
message=”Some tooltip text.”]
Results
message or title value must be entered as HTML entities. See examples below. More about HTML entities at W3 SchoolsAttributes: message, title, icon, position
message attribute
This is a required attribute. It’s behavior can be seen in our example. Please be sure to use HTML entities in place of quotation marks and special characters.
title attribute
title places a small title box above the the text given by the message attribute’s value. HTML entities are required for special characters.
icon attribute
By default, tooltips display the Font Awesome question-circle icon. The icon attribute lets users substitute the Font Awesome info-circle icon.
DEPRECATED, do not use trigger attribute
As of 1/17/2019, the default behavior for triggering the tooltip is now on hover, focus, and click events. This update was made so keyboard users could always trigger the tooltip.
position attribute
By default, tooltips display above the icon. By using the position attribute you can place text to the position="right", left: position=left, or below position="bottom" the icon.