Tooltips

Close this notice

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Intermediate

Tooltips are a great way to briefly describe a link without having the user leave the page. Keep in mind that you do not want a redundant amount of tooltips. Only include them if a description is necessary.

With the aforementioned considerations in mind, you can create tooltips by following these steps:

  1. Create a link by adding a href tag, <a href="#">
  2. Add the tooltip class to the link you wish to be a tooltip, <a class="tooltip" href="#">
  3. Add a title for your tooltip text, and you should now have a link that looks similar to this: <a class="tooltip" href="#" title="This is the tooltip text">
  4. Add the tooltip jQuery plugin to have the tooltip work, 
    <script>WDN.initializePlugin('tooltip');</script>

Example

This page demonstrates the usage of tooltips. Demo

<p>This page demonstrates the usage of tooltips. <a class="tooltip" href="#" title="This is the 
tooltip text">Demo</a></p>
 <script>WDN.initializePlugin('tooltip');</script>

Accessibility Considerations: 

To be added.

Usability Considerations: 

  • Avoid too many tooltips.
Contributed By: 
IIM