CSS и вплывающая подсказка, создаваемая тегом title

Dmitry · Регистрация: 09.09.2009

Студворк — интернет-сервис помощи студентам

Можно ли как-то управлять отображением (внешним видом - цветом текста, фона, размером шрифта) всплывающих подсказок, создаваемых тегом title ?
пример кода

HTML5
1
<span title="Вот это всплывающая подсказка">А это текст, при наведении на который она появляется</span>

@Vlad_IT · 15.01.2014, 00:48

Нет. Может в новых стандартах что-то готовят, но я не слышал. Обычно это приходится делать через div на абсолютном позиционировании, или же можно воспользоватся уже готовыми решениями, типа HINT.css.

Добавлено через 9 минут
Кстати если важна кроссбраузерность (а HINT.css не работает на IE версиях ниже восьмой), то нужно тогда прибегнуть к использованию JS, например jQuery Tooltip или jTip и.т.д.

Добавлено через 9 минут
Еще мне нравится решение через псевдоэлемент :after, вот пример. Но опят же проблемы с кроссбраузерностью.

@anonymous_23 · 15.01.2014, 07:06

Сообщение от Dmitry

Можно ли как-то управлять отображением (внешним видом - цветом текста, фона, размером шрифта) всплывающих подсказок, создаваемых тегом title ?

На мой взгляд оптимальное сейчас решение это jQuery. Если у пользователя отключены js то конечно всё работать не будет, однако ему всё равно покажется подсказка, просто стандартная. Если же всё ОК то с помощью стилей оформляем и всё всем счастье и красота. А в дальнейшем с развитием браузеров (штопаются они в виде новых версия ещё дай боже каждым) может и подсказки будут со стилями встроенными.

P.S.: Хотя и через стили напрямую можно, но как то пока не доверяю этому решению на 100%.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@Vlad_IT 1452 / 360 / 61 Регистрация: 03.04.2010 Сообщений: 2,096
	15.01.2014, 00:48
	Нет. Может в новых стандартах что-то готовят, но я не слышал. Обычно это приходится делать через div на абсолютном позиционировании, или же можно воспользоватся уже готовыми решениями, типа HINT.css. Добавлено через 9 минут Кстати если важна кроссбраузерность (а HINT.css не работает на IE версиях ниже восьмой), то нужно тогда прибегнуть к использованию JS, например jQuery Tooltip или jTip и.т.д. Добавлено через 9 минут Еще мне нравится решение через псевдоэлемент :after, вот пример. Но опят же проблемы с кроссбраузерностью. 1

Опции темы