Как изменить стиль атрибута title внутри тега привязки?

Пример:

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

Как изменить представление атрибута title в браузере? По умолчанию у него просто желтый фон и маленький шрифт. Я хотел бы сделать его больше и изменить цвет фона.

Есть ли способ CSS для стилизации атрибута title?

Ответ 1

С CSS3 теперь можно легко стилизовать атрибут title, используя свойство content. Вот короткая демонстрация:

CSS

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  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, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

Демо http://jsfiddle.net/tDQWN/

Ответ 2

Вот пример того, как это сделать:

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>

Ответ 3

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

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

Источник: 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

Ответ 4

Вы не можете стилизовать фактический атрибут `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

Ответ 5

CSS не может изменить внешний вид всплывающей подсказки. Это зависит от браузера/ОС. Если вам нужно что-то другое, вам придется использовать Javascript для генерации разметки, когда вы наведете над элементом, а не на всплывающую подсказку по умолчанию.

Ответ 6

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

Когда использовать его

Автоматически стилирует всплывающую подсказку для всех элементов HTML с определенным атрибутом TITLE (сюда относятся элементы, динамически добавленные в документ в будущем).
Нет изменений или хаков Javascript/HTML, необходимых для каждой подсказки (только атрибут TITLE, семантически понятный)
Очень легкий (добавляет около 300 байт gzipped и minified)
Вам нужна только очень простая настраиваемая подсказка

Когда НЕ использовать

Требуется 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 distance to the cursor

Стиль

Теперь вы можете создавать свои всплывающие подсказки, используя следующий CSS:

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

Ответ 7

jsfiddle для пользовательского шаблона подсказки Здесь

Он основан на CSS-позиционировании и селекторах класса pseduo

Отметьте MDN docs для кроссбраузерной поддержки псевдоклассов

    <!-- 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;
}

Ответ 8

Я нашел ответ здесь: 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>

Ответ 9

Я бы рекомендовал всплывающую подсказку javascript. Я часто использовал всплывающую подсказку Zorn и люблю гибкость: http://www.walterzorn.de/en/tooltip/tooltip_e.htm

Есть также некоторые параметры jQuery, если вам удобнее: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

Ответ 10

Нативная подсказка не может быть написана.

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

Ответ 11

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

Ответ 12

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/