Всплывающая подсказка — удобный способ дать пояснение или дополнение к слову или фразе, когда на самой странице нет места для этого, например, в случае таблицы. Они полезны, когда нужно добавить контекст, расшифровать аббревиатуру, дать перевод термина или его определение, в случае, когда термин может быть не понятен рядовому читателю вашей вики. Лучше применять всплывающие подсказки к текстовым элементам и использовать тег <abbr>
, а не <div>
или <span>
.
Стоит учесть, что всплывающие подсказки невозможно просмотреть с мобильных устройств, а потому стоит использовать их для добавления простых дополнительных данных и не включать во всплывающие подсказки действительно важную информацию.
Шаг за шагом[]
Для создания всплывающей подсказки, поместите текст на странице в теги abbr, используя параметр title="Это всплывающая подсказка!", например:
<abbr title="Это всплывающая подсказка!">Наведи на меня курсор мыши!</abbr>
В итоге получится это:
- Наведи на меня курсор мыши!
Вы можете поменять вид курсора, который будет отображаться при его наведении на текст. Для этого используйте style="cursor:<cursor-style>;". Например:
- style="cursor: help;" даст:
- Наведи на меня курсор мыши, чтобы он превратился в курсор с вопросом.
- style="cursor: pointer;" даст:
- Наведи на меня курсор мыши, чтобы он превратился в курсор с указательным пальцем.