Можно ли стилизовать заголовок тега abbr?

Question

Возьмите следующий код:

<abbr title="World Health Organization">WHO</abbr>

Можем ли мы оформить заголовок тега abbr? Так что вместо пользовательской подсказки мы можем использовать заголовок?

Answer 1

Если вы имеете в виду стиль реального всплывающего текста, нет, вы не можете стилизовать его с помощью CSS; это зависит от браузера. Javascript на основе tooltips было бы так, как я бы справился, так как это позволяет иметь больше контроля над этим поведением.

Answer 2

На самом деле, ответ Алекса Макпа неверен. Это вполне возможно сделать с помощью CSS для современных браузеров. Однако можно использовать запасной вариант для старых браузеров с JavaScript.

abbr {
    position: relative;
}

abbr:hover::after {
    position: absolute;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 1em;
    background: yellow;
    content: attr(title);
}

Это добавит абсолютно позиционированный псевдоэлемент в верхнем правом углу тега abbr, используя атрибут содержимого внутри заголовка, когда тег abbr наведен на.

Answer 3

Я искал что-то подобное и придумал следующую альтернативу (протестирован на Firefox, Safari и Chrome на Mac, работает с IE 7-10, когда я щелкнул по нему), основываясь на этой ссылке:

HTML:

<abbr title="My Custom Abbreviation" name="">Abbreviation</abbr>

JQuery:

$('[title]').each( function() {
    var mytitle = $(this);
    mytitle.data('title',mytitle.attr('title')); // get title attribute value
mytitle.attr('name', mytitle.attr('title')); // add title attribute value to NAME attribute
    mytitle.removeAttr('title'); // remove the title attribute, removing browser tooltip
});

CSS:

abbr {
    position: relative;
}
abbr:hover::after {
    position: absolute;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 1em;
    background: yellow;
    content: attr(name);
}

Answer 4

Вы можете стилизовать способ отображения сокращенной версии, поэтому в данном случае "ВОЗ". Но не так, как появляется всплывающее окно, так как это контролируется браузером / ОС.

Вы можете обойти это ограничение, применив некоторые вещи JQuery к любому abbr тег программно - это будет отображать divиз которых содержимое будет читать так же, как title на теге, который вызвал это.