Как я могу отображать простые всплывающие подсказки на значках в HTML?
-
09-06-2019 - |
Вопрос
Я использую ActiveScaffold в приложении Ruby on Rails, и для экономии места в таблице я заменил в таблице текст «действий» по умолчанию (т.«редактировать», «удалить», «показать») с помощью значков с использованием CSS.Я также добавил пару дополнительных действий с помощью action_link.add («переместить» и «копировать»).
Для ясности, Я хотел бы, чтобы всплывающая подсказка отображала соответствующее действие. (т.е.«редактировать», «копировать»), когда навожу указатель мыши на иконку.
Я думал, что смогу сделать это, добавив к тегу простое определение «alt», но, похоже, это не сработало.
Может ли кто-нибудь указать мне в правильном направлении?
Решение
А alt
Атрибут следует использовать в качестве альтернативы изображению в случае отсутствия изображения или в текстовом браузере.
IE ошибся, когда они сделали alt
отображаться в виде всплывающей подсказки.Это никогда не должно было быть так.
Правильный атрибут для этого: title
, что, конечно, не делает всплывающую подсказку в IE.
Итак, чтобы всплывающая подсказка отображалась как в IE, так и в FireFox/Safari/Chrome/Opera, используйте оба alt
атрибут и title
атрибут.
Другие советы
Добавляю к этой теме небольшое замечание...нет тега alt или тега заголовка.Атрибут alt предназначен для изображений, но все остальные элементы на странице могут иметь атрибут title, что является лучшим выбором для совместимости между браузерами.
<span title="Click here to edit the foo">
Edit
</span>
Вам нужен тег «заголовок».Я не уверен, необходимо ли это больше, но я обычно добавляю теги alt и title, чтобы все браузеры отображали подсказку одинаково.
Свойство alt тега img работает в некоторых браузерах, но не во всех (например, в некоторых браузерах на базе Mozilla).
"правильно"Чтобы сделать это, нужно использовать свойство title.
Подсказки в HTML — это содержимое alt
текст для тегов изображений, но если вы устанавливаете его с помощью CSS, у вас, вероятно, есть background:url(...);
стиль вместо изображения.
Использовать alt
на изображениях и title
по ссылкам.
Как отметил Престол, тег alt должен работать для изображений, а заголовок для ссылок.Однако это также зависит от браузера... большинство браузеров должен реализовать функцию, которая отображает эти метаданные в виде всплывающих подсказок, но это не обязательно.
Понимая, как отметил Джоэл Коэхум, что моя иконка на самом деле была фоновым изображением, я создал изображение Transparent.gif с атрибутами title и alt поверх фона, и вуаля — всплывающие подсказки!
хороший инструмент здесьhttp://www.guangmingsoft.net/htmlsnapshot/html2image.htm