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

Question

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

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

Я думал, что смогу сделать это, добавив в тег простое определение «alt», но это не работает.

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

«right way», чтобы использовать это свойство title.

Answer 7

Понимая, что мой значок на самом деле был фоновым изображением, я создал прозрачное изображение с заголовком и атрибутами alt поверх фона, а voila - всплывающие подсказки!

Answer 8

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

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

Answer 9

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