Пример:
<a href="example.com" title="My site"> Link </a>
Как изменить представление атрибута title в браузере? По умолчанию у него просто желтый фон и маленький шрифт. Я хотел бы сделать его больше и изменить цвет фона.
Есть ли способ CSS для стилизации атрибута title?
Ответы:
Вот пример того, как это сделать:
источник
Кажется, что на самом деле существует чистое решение CSS, требующее только
attr
выражения css , сгенерированного содержимого и селекторов атрибутов (что предполагает, что оно работает еще в IE8):Источник: https://jsfiddle.net/z42r2vv0/2/
обновление с вводом @ViROscar: обратите внимание, что нет необходимости использовать какой-либо конкретный атрибут, хотя я использовал атрибут «title» в приведенном выше примере; на самом деле, я бы рекомендовал использовать атрибут «alt», так как есть некоторый шанс, что контент будет доступен пользователям, которые не могут воспользоваться CSS.
обновите снова Я не изменяю код, потому что атрибут «title» в основном стал означать атрибут «tooltip», и, вероятно, не очень хорошая идея скрывать важный текст внутри поля, доступного только при наведении, но если вы заинтересованный в том, чтобы сделать этот текст доступным, атрибут "aria-label" кажется лучшим местом для него: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
источник
stacking context
. Все элементы,position
кромеstatic
создания нового контекста стека и чистых подсказок CSS, не видны снаружи и не могут выходить за пределы такого контекста стека , поэтому, если у вас есть жесткий элемент с положениемrelative
, ваша подсказка CSS не будет видна. Единственное решение - прикрепить всплывающую подсказку к верхнему контексту стека (например<body>
), который требует JavaScript.Вы не можете стилизовать фактический
title
атрибутСпособ
title
отображения текста в атрибуте определяется браузером и зависит от браузера. Веб-страница не может применить какой-либо стиль к всплывающей подсказке, отображаемой браузером на основеtitle
атрибута.Однако вы можете создать нечто очень похожее, используя другие атрибуты.
Вы можете создать псевдо-всплывающую подсказку с помощью CSS и пользовательского атрибута (например
data-title
)Для этого я бы использовал
data-title
атрибут.data-*
Атрибуты - это метод хранения пользовательских данных в элементах DOM / HTML. Есть несколько способов доступа к ним . Важно отметить, что они могут быть выбраны с помощью CSS.Учитывая, что вы можете использовать CSS для выбора элементов с
data-title
атрибутами, вы можете затем использовать CSS для создания:after
(или:before
),content
который содержит значение атрибута с помощьюattr()
.Примеры всплывающих подсказок
Больше и с другим цветом фона (по запросу вопроса):
Более сложный стиль (адаптировано из этого поста в блоге ):
Известные проблемы
В отличие от реальной
title
всплывающей подсказки, всплывающая подсказка, созданная вышеупомянутым CSS, не обязательно должна быть видимой на странице (т.е. она может находиться за пределами видимой области). С другой стороны, он гарантированно находится в текущем окне, что не относится к реальной всплывающей подсказке.Кроме того, псевдо-всплывающая подсказка располагается относительно элемента, который имеет псевдо-всплывающую подсказку, а не относительно того, где находится мышь на этом элементе. Вы можете настроить точную настройку псевдо-всплывающей подсказки. Его появление в известном месте относительно элемента может быть преимуществом или недостатком, в зависимости от ситуации.
Вы не можете использовать
:before
или:after
на элементы, которые не являются контейнерамиВ этом ответе есть хорошее объяснение: «Могу ли я использовать псевдоэлемент: before или: after в поле ввода?»
Фактически, это означает , что вы не можете использовать этот метод непосредственно на элементах , как
<input type="text"/>
,<textarea/>
,<img>
и т.д. Простое решение , чтобы обернуть элемент это не контейнер в<span>
или<div>
и есть псевдо-подсказка на контейнере.Примеры использования псевдо-всплывающей подсказки для
<span>
переноса неконтейнерного элемента:Из приведенного выше кода в сообщении блога (который я впервые увидел в ответе, который его занимал плагиатом), для меня стало очевидным использование
data-*
атрибута вместоtitle
атрибута. Это также было предложено в комментарии snostorm к этому (теперь удаленному) ответу.источник
input[type='text']
илиtextarea
, но я не знаю почему. Кто-нибудь может объяснить?:before
и:after
не работают с элементами, которые не являются контейнерами. В ответе есть хорошее объяснение: можно ли использовать псевдоэлемент: before или: after в поле ввода? Чтобы использовать этот метод, вероятно, проще всего обернуть элементы, которые не являются контейнерами в<span>
или<div>
в котором вы помещаетеdata-title
атрибут. Вы, вероятно, также захотите дать ихdisplay: inline-block;
, так как это сделает их того же размера, что<input>
и<textarea>
. Я обновил этот ответ с примером.CSS не может изменить внешний вид всплывающей подсказки. Это зависит от браузера / ОС. Если вы хотите что-то другое, вам придется использовать Javascript для создания разметки при наведении курсора на элемент вместо всплывающей подсказки по умолчанию.
источник
Я думал, что выложу свое решение на 20 строк JavaScript здесь. Это не идеально, но может быть полезно для некоторых в зависимости от того, что вам нужно из ваших подсказок.
Когда его использовать
TITLE
атрибутом (это включает элементы, динамически добавляемые в документ в будущем)TITLE
атрибут, семантически чистый)Когда НЕ использовать
Код
Вставьте его куда угодно, он должен работать, даже если вы запустите этот код до того, как DOM будет готов (он просто не покажет ваши всплывающие подсказки, пока DOM не будет готов).
Настроить
Вы можете изменить
var
объявления во второй строке, чтобы немного их настроить.Стиль
Теперь вы можете стилизовать ваши всплывающие подсказки, используя следующий CSS:
источник
Я нашел ответ здесь: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
мой собственный код выглядит следующим образом: я изменил имя атрибута. Если вы сохраняете имя заголовка для атрибута, в результате у вас появляются два всплывающих окна для одного и того же текста, другое изменение заключается в том, что мой текст при наведении курсора отображается под отображаемым текстом.
источник
Jsfiddle для пользовательского шаблона всплывающей подсказки здесь
Он основан на CSS позиционировании и селекторах псевдо-классов
Проверьте MDN документы для кросс-браузерной поддержки псевдо-классов
источник
Родная подсказка не может быть стилизована.
При этом вы можете использовать некоторую библиотеку, которая отображала бы стили с плавающими слоями при наведении элемента (вместо собственных всплывающих подсказок и подавляющих их), требующих небольших или никаких изменений кода ...
источник
title
атрибут. Поэтому, если вы настроите свою собственную реализацию всплывающей подсказки, лучше использовать какой-либо другой атрибут (скажем,data-tip
) вместоtitle
.Вы не можете стилизовать всплывающую подсказку браузера по умолчанию. Но вы можете использовать javascript для создания своих собственных подсказок HTML.
источник
Это также работает с любым атрибутом, который вы хотите добавить, например:
HTML
CSS
Смотрите, как это работает на: http://jsfiddle.net/vpYWE/1/
источник
anything
недопустимый атрибут HTML. Для пользовательских атрибутов используйтеdata-
атрибуты.