Skip to main content
Version: 5.1 (Archived)

Tooltip

Overview​

Tooltips are useful elements. They allow presenting information with an icon or a short text and adding additional informationn when the users hovers the icon or text. If several tooltips are on a page, every toolpip must have an own ID. Other wise a screenreader cannot identify which tooltip gives Information to which element.

Code Snippet​

Example Tooltip from com_menus, view menus 
<span class=".." aria-describedby="tip-unpublish<?php echo $i; ?>">
    <?php echo $item->count_published; ?>
</span>
<div role="tooltip" id="tip-unpublish<?php echo $i; ?>">
   <?php echo Text::_('COM_MENUS_COUNT_UNPUBLISHED_ITEMS'); ?>
</div>
Example Tooltip frontend - edit icon for an article
<a href=".." aria-describedby="editarticle-<?php echo $id; ?>">
    <span class="icon-edit" aria-hidden="true"></span>Edit
    <div role="tooltip" id="editarticle-<?php echo $id; ?>">Published Article</div>
</a>

Common Mistakes​

  • Missing ID.
  • ID not uniquee.

Example in Joomla​

A tooltip on a element in a table: administrator/components/com_menus/tmpl/menu/default.php

A tooltip in the frontend which is visible for editable content (if you have permission for editing) components/com_content/tmpl/article/form.php

Who is affected?​

People using screen readers need ....

People with cognitive disabilities need ... etc.

Who is impacted most by the accessibility of this element?

Testing for accessibility​

How does someone test that this is accessible with a screenreader?

  1. Use the screen reader to navigate to ...
  2. Make sure ...
  3. Make sure ...
  4. If ... then it passes. ✅
  5. If ... then it fails. ❌

Relevant WCAG Success Criteria​

Relevant ATAG Guidelines (optional)​