跳至主要内容
版本：5.1

工具提示

概述​

工具提示是有用的元素。它们允许使用图标或简短文本呈现信息，并在用户将鼠标悬停在图标或文本上时添加其他信息。如果页面上有几个工具提示，则每个工具提示必须具有唯一的 ID。否则，屏幕阅读器无法识别哪个工具提示向哪个元素提供信息。

代码片段​

来自 com_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>
前端示例工具提示 - 文章的编辑图标
<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>

常见错误​

  • 缺少 ID。
  • ID 不唯一。

Joomla 中的示例​

表格中元素上的工具提示：administrator/components/com_menus/tmpl/menu/default.php

前端中可见的工具提示，用于可编辑内容（如果您有编辑权限）components/com_content/tmpl/article/form.php

谁受影响？​

使用屏幕阅读器的人需要……

认知障碍人士需要……等等。

此元素的无障碍性对谁的影响最大？

测试无障碍性​

如何使用屏幕阅读器测试此功能是否可访问？

  1. 使用屏幕阅读器导航到……
  2. 确保……
  3. 确保……
  4. 如果……则通过。✅
  5. 如果……则失败。❌

相关的 WCAG 成功标准​

相关的 ATAG 指南（可选）​