Tooltip Shortcode

Summary

 

This allow you to create a link with a tooltip: pop-up text that appears when you hover your mouse over the text.

This shortcode is not enabled by default. It must be enabled by an admin on each community site that will use it.

The text of the link goes between the [uwsa_tooltip] and [/uwsa_tooltip] tags, just like using <a></a> tags.

Required Attributes

This is the URL. It replaces the href. The [uwsa_tooltip] is used in place of the <a>. Just like <a>, [uwsa_tooltip] requires a closing tag [/uwsa_tooltip]. Like an <a>, the text that appears on the page is wrapped by the short code.

placement

This defines the placement of the tooltip in relation to the link.

The options are left, top, bottom or right.

text

This defines the text that is included in the tooltip hover.

Optional Attributes

container

This adds a data-container attribute to the tooltip to help place it in the right location. Appends the tooltip to a specific element.

newtab

Set newtab="yes" to have the link open in a new tab.

Usage / Examples

[uwsa_tooltip link="http://google.com" placement="left" text="This is some info about the link"]Education Cost[/uwsa_tooltip]

Note that [uwsa_tooltip] replaces the <a></a> tag.

For the Accountability Dashboard:

<div class="accountability-icons">
<h3 class="cost">
[uwsa_tooltip link="http://google.com" placement="left" text="This is some info about the link"]Education Cost[/uwsa_tooltip]
</h3>
</div>