Как отобразить простые подсказки на значках в формате HTML?

Question

Я использую ActiveScaffold в приложении Ruby on Rails, и для экономии места в таблице я заменил текст по умолчанию "действия" в таблице (т. Е. "Изменить", "удалить", "показать") на значки используя CSS. Я также добавил несколько пользовательских действий с помощью action_link.add («переместить» и «скопировать»).

Для ясности, Я бы хотел, чтобы всплывающая подсказка всплывала со связанным действием (т. Е. "Редактировать", "копировать"), когда я наводил курсор мыши на значок.

Я думал, что смогу сделать это, добавив простое определение "alt" к тегу, но, похоже, это не сработает.

Может ли кто-нибудь указать мне правильное направление?

Answer 1

Атрибут alt должен использоваться в качестве альтернативы изображению, в случае отсутствия изображения или в текстовом браузере.

IE ошибся, когда они заставили alt появиться в виде всплывающей подсказки. Такого никогда не было.

Правильный атрибут для этого - title, который, конечно, не делает всплывающую подсказку в IE.

Таким образом, чтобы всплывающая подсказка отображалась как в IE, так и в FireFox / Safari / Chrome / Opera, используйте атрибут alt и атрибут title.

Answer 2

Просто небольшая точка для добавления в эту ветку ... нет тега alt или заголовка. Атрибут alt предназначен для изображений, но все остальные элементы на странице могут иметь атрибут title, который является лучшим выбором для кросс-браузерной совместимости.

<span title="Click here to edit the foo">
  Edit
</span>

Answer 3

Вы хотите тег "title". Я не уверен, нужно ли это больше, но обычно я добавляю теги alt и title, чтобы все браузеры отображали подсказку одинаково.

Answer 4

Свойство alt тега img работает в некоторых браузерах, но не во всех (например, в некоторых из них на основе mozilla).

« правильный путь » для этого - использовать свойство title.

Answer 5

Используйте alt на изображениях и title на ссылках.

Answer 6

Всплывающие подсказки в HTML - это содержимое текста alt для тегов изображения, но если вы устанавливаете это с помощью CSS, у вас, вероятно, будет стиль background:url(...); вместо изображения.

Answer 7

хороший инструмент здесь http://www.guangmingsoft.net/htmlsnapshot/html2image.htm

Answer 8

Понимая, как отметил Джоэл Коухом, что моя иконка на самом деле была фоновым изображением, я создал изображение transparent.gif с атрибутами title и alt поверх фона и вуаля - всплывающими подсказками!

Answer 9

Как отметил Престол, тэг alt должен работать для изображений и заголовок для ссылок. Однако это также зависит от браузера ... большинство браузеров должны реализовывать функциональность, которая отображает эти метаданные в виде всплывающих подсказок, но это не требуется.