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)