Как я могу отображать простые всплывающие подсказки на значках в HTML?

StackOverflow https://stackoverflow.com/questions/59221

Вопрос

Я использую 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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top