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.<\/p>\n
[tooltip message=\"Some tooltip text.\"] 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.<\/p>\n By default, tooltips display the Font Awesome 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.<\/p>\n By default, tooltips display above the icon. By using the
\nBy default, the tooltip<\/code> will display a Font Awesome question-circle<\/code> icon, and the tip will show when a user clicks the icon.<\/p>\n\n
\n[tooltip<\/li>\nmessage<\/code> attribute and end the shortcode:<\/strong>
\nmessage=”Some tooltip text.”]<\/li>\n<\/ol>\nResults<\/h3>\n
Code<\/h4>\n
\n[tooltip message=\"Some tooltip text.\"]<\/div><\/div><\/div><\/div>Rendering<\/h4>\n
\n<\/span><\/a>
\n(Click to view)
\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nmessage<\/code> or title<\/code> value must be entered as HTML entities. See examples below. More about HTML entities at W3 Schools<\/a><\/div><\/div><\/div><\/p>\nAttributes:
message, title, icon, position<\/code><\/h2>\nmessage<\/code> attribute<\/h3>\ntitle<\/code> attribute<\/h3>\ntitle<\/code> places a small title box above the the text given by the message<\/code> attribute’s value. HTML entities are required for special characters.<\/p>\nCode<\/h4>\n
\n[tooltip message=\""Some tooltip text in double quotation marks."\" title=\"'A tooltip title in single quotation marks'\"]<\/div><\/div><\/div><\/div>Rendering<\/h4>\n
\n<\/span><\/a>
\n(Click to view)
\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nicon<\/code> attribute<\/h3>\nquestion-circle<\/code> icon. The icon<\/code> attribute lets users substitute the Font Awesome info-circle<\/code> icon.
\nCode<\/h4>\n
\n[tooltip message=\"Some tooltip text\" icon=\"info-circle\"]<\/div><\/div><\/div><\/div>Rendering<\/h4>\n
\n<\/span><\/a>
\n(Click to view)
\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nDEPRECATED, do not use\u00a0
trigger<\/code><\/strong> attribute<\/h4>\nposition<\/code> attribute<\/h3>\nposition<\/code> attribute you can place text to the position=\"right\"<\/code>, left: position=left<\/code>, or below position=\"bottom\"<\/code> the icon.<\/p>\nposition=\"right\"<\/code><\/h4>\nCode<\/h5>\n
\n[tooltip message=\"Some tooltip text to the right of the icon\" position=\"right\"]<\/div><\/div><\/div><\/div>Rendering<\/h5>\n
\n<\/span><\/a>
\n(Click to view)
\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nposition=\"left\"<\/code><\/h4>\nCode<\/h5>\n
\n[tooltip message=\"Some tooltip text to the left of the icon\" position=\"left\"]<\/div><\/div><\/div><\/div>