Атрибут title тега <tfoot>

Описание

Атрибут title в теге <tfoot> добавляет всплывающую подсказку (tooltip), которая появляется при наведении курсора на нижний колонтитул таблицы. Это полезно для:

  • Дополнительных пояснений к данным
  • Доступности (читается скринридерами)
  • Отображения информации при нехватке места
Пример использования:
<table> <tfoot title="Итоговые значения за текущий месяц"> <tr> <td>Итого: 1,250 руб.</td> </tr> </tfoot> </table>

Особенности работы:

  • Подсказка появляется после небольшой задержки (обычно 1-2 секунды)
  • На мобильных устройствах может не отображаться
  • Поддерживает многострочный текст (через \n)
  • Читается программами экранного доступа

Рекомендации:

  • Используйте краткие и информативные подсказки
  • Избегайте дублирования информации из содержимого ячеек
  • Для сложных подсказок рассмотрите JavaScript-решения
  • Тестируйте отображение в разных браузерах

Пример с многострочной подсказкой:

<table> <tfoot title="Итоги за квартал\nПериод: Январь-Март 2025\nВалюта: Рубли"> <tr> <td>45,000 руб.</td> </tr> </tfoot> </table>

Ограничения:

  • Нет контроля над стилизацией подсказки
  • Ограниченная функциональность на мобильных устройствах
  • Нельзя отобразить без наведения курсора
  • Может конфликтовать с кастомными tooltip-решениями

Сравнение с аналогичными атрибутами:

Атрибут Назначение
title Всплывающая подсказка при наведении
aria-label Невидимая подпись для доступности
data-tooltip Кастомные подсказки через JavaScript

Пример хорошей практики:

<table> <tfoot title="Сумма с учетом НДС 20%" aria-label="Итоговая сумма с налогом"> <tr> <td>1,200 руб.</td> </tr> </tfoot> </table>

Примечание: Для профессиональных решений:

  • Используйте специализированные библиотеки для тултипов (Tippy.js)
  • Рассмотрите скрытые/раскрывающиеся блоки с подсказками
  • Для важной информации избегайте зависимости от hover-состояния