Приклад:

<a href="example.com" title="My site"> Link </a>

Як змінити подання атрибута "title" у браузері ?. За замовчуванням у нього просто жовтий фон і невеликий шрифт. Я хотів би зробити його більшим і змінити колір тла.

Чи існує спосіб CSS для стильового атрибуту заголовка?

Ось приклад того, як це зробити:

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

Здається, що насправді існує чисте рішення CSS, яке вимагає лише attrвираження css , генерованого вмісту та селекторів атрибутів (що говорить про те, що воно працює аж до IE8):

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

Джерело: https://jsfiddle.net/z42r2vv0/2/

оновлення w / input від @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

Ви не можете створити фактичний titleатрибут

Як відображається текст в titleатрибуті, визначається браузером і змінюється від браузера до браузера. Неможливо на веб-сторінці застосувати будь-який стиль до підказки, яку відображає браузер на основі titleатрибута.

Однак ви можете створити щось дуже схоже, використовуючи інші атрибути.

Ви можете зробити псевдоінструмент із CSS та спеціальним атрибутом (наприклад data-title)

Для цього я використовував би data-titleатрибут. data-*атрибути - це спосіб зберігати власні дані в елементах DOM / HTML. Існує кілька способів доступу до них . Важливо, що їх можна вибрати CSS.

Зважаючи на те, що ви можете використовувати CSS для вибору елементів з data-titleатрибутами, ви можете використовувати CSS для створення :after(або :before), contentщо містить значення атрибута за допомогою attr().

Приклади стилізованих підказок

Більший і з іншим кольором тла (на запитання запитання):

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

Більш досконалий стиль (адаптований з цієї публікації в блозі ):

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    padding: 4px 4px 4px 8px;
    color: #222;
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
    -moz-box-shadow: 0px 0px 4px #222;  
    -webkit-box-shadow: 0px 0px 4px #222;  
    box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

Відомі проблеми

На відміну від реальної titleпідказки, підказка, створена вищевказаним CSS, не обов'язково гарантується, що вона буде відображатися на сторінці (тобто вона може бути поза видимою областю). З іншого боку, це гарантовано знаходиться у поточному вікні, що не стосується фактичної підказки.

Крім того, псевдо-підказка розташована відносно елемента, який має псевдоінструмент, а не щодо місця, де миша знаходиться на цьому елементі. Ви можете налаштувати, де відображається псевдоінформація. Виявлення його у відомому місці щодо елемента може бути вигодою або недоліком, залежно від ситуації.

Ви не можете використовувати :beforeабо :afterна елементах, які не є контейнерами

У цій відповіді є хороше пояснення "Чи можу я використовувати: перед або: після псевдоелемента у полі введення?"

Фактично, це означає , що ви не можете використовувати цей метод безпосередньо на елементах , як <input type="text"/>, <textarea/>, <img>і т.д. Просте рішення , щоб обернути елемент це не контейнер в <span>або <div>і є псевдо-підказка на контейнері.

Приклади використання псевдоінструмента для <span>обгортання неконтейнерного елемента:

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type=&quot;text&quot;"><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>

^{З коду в посилання на блозі, зв'язаному вище (який я вперше побачив у відповіді тут, що його плагіатував), мені здалося очевидним використання data-*атрибута замість titleатрибута. Це також було запропоновано у коментарі snostorm на цю (тепер видалену) відповідь.}

CSS не може змінити зовнішній вигляд підказки. Це залежить від браузера / ОС. Якщо ви хочете щось інше, вам доведеться використовувати Javascript для створення розмітки, коли ви наводите курсор на елемент замість підказки за замовчуванням.

Я думав, що опублікую тут своє 20-річне рішення JavaScript. Це не ідеально, але може бути корисним для деяких залежно від того, що вам потрібно від підказок.

Коли його використовувати

• Автоматично стилює підказку для всіх елементів HTML із TITLEвизначеним атрибутом (сюди входять елементи, що динамічно додаються до документа в майбутньому)
• Для кожної підказки не потрібно змінювати Javascript / HTML або хакі (лише TITLEатрибут, семантично зрозумілий)
• Дуже легкий (додає близько 300 байтів gzipped та мінімізований)
• Вам потрібна лише дуже проста стильна підказка

Коли НЕ використовувати

• Потрібен jQuery, тому не використовуйте, якщо ви не використовуєте jQuery
• Погана підтримка вкладених елементів, які мають обидва підказки
• Потрібно більше, ніж одна підказка на екрані одночасно
• Вам потрібна підказка, щоб через деякий час зникнути

Код

// Use a closure to keep vars out of global scope
(function () {
    var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
    DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
    showAt = function (e) {
        var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
        $("#" + ID).html($(e.target).data(DATA)).css({
            position: "absolute", top: ntop, left: nleft
        }).show();
    };
    $(document).on("mouseenter", "*[title]", function (e) {
        $(this).data(DATA, $(this).attr("title"));
        $(this).removeAttr("title").addClass(CLS_ON);
        $("<div id='" + ID + "' />").appendTo("body");
        showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
        $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
        $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

Вставте його куди завгодно, він повинен працювати навіть під час запуску цього коду до того, як DOM буде готовий (він просто не відображатиме ваші підказки, поки DOM не буде готовий).

Налаштувати

Ви можете змінити varдекларації у другому рядку, щоб трохи їх налаштувати.

var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor

Стиль

Тепер ви можете стилізувати підказки за допомогою наступних CSS:

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

Тут я знайшов відповідь: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

мій власний код іде так: я змінив ім'я атрибута, якщо ви підтримуєте назву атрибута, у вас є два спливаючих вікна для того ж тексту, ще одна зміна полягає в тому, що мій текст на ширяючому екрані відображається під відкритим текстом.

.tags {
  display: inline;
  position: relative;
}

.tags:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: -34px;
  color: #fff;
  content: attr(glose);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 350px;
}

.tags:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 0 6px 6px 6px;
  bottom: -4px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<a class="tags" glose="Text shown on hovering">Exposed text</a>

Jsfiddle для призначеного для користувача шаблону підказки Тут

Він заснований на CSS-позиціонуванні та селекторах класів pseduo

Перевірте документи MDN на підтримку крос-браузера псевдокласів

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; a developer.
</p>

    /*CSS*/
a.tooltip {
    position: relative;
}

a.tooltip span {
    display: none;    
}

a.tooltip:hover span, a.tooltip:focus span {
    display:block;
    position:absolute;
    top:1em;
    left:1.5em;
    padding: 0.2em 0.6em;
    border:1px solid #996633;
    background-color:#FFFF66;
    color:#000;
}

Рідну підказку не можна створити.

Якщо говорити, ви можете використовувати деяку бібліотеку, яка б відображала стилі, що плавають шарами, коли елемент навішується (замість нативної підказки та придушує їх), вимагаючи невеликих чи відсутніх змін коду ...

Ви не можете стилізувати підказку браузера за замовчуванням. Але ви можете використовувати javascript для створення власних підказок HTML.

a[title="My site"] {
    color: red;
}

Це також працює з будь-яким атрибутом, який ви хочете додати, наприклад:

HTML

<div class="my_class" anything="whatever">My Stuff</div>

CSS

.my_class[anything="whatever"] {
    color: red;
}

Дивіться це на веб-сайті: http://jsfiddle.net/vpYWE/1/