Застосування CSS attr і content для створення підказки

1

Від автора: виявляється, я закоханий у content та attr CSS; я недавно писав про те, як можна взагалі застосовувати ці властивість і вираз, як виконати в CSS лічильники і скористатися ними для локалізації. Я хотів би поділитися з вами кількома методами застосування виразу attr і властивості content для призначення стилів спливаючих підказок — тултипам.

Підказка 1: Альтернатива атрибута title

Атрибут title застосовується для відображення простих текстових підказок, але міняти стилі «віртуальних» тултипов не можна. Замість того можна замістити ці підказки, скориставшись атрибутом data-tooltip і невеликою кількістю CSS:

.tooltip-block:hover:after{
border: 1px solid #fc0;
padding: 3px 6px;
background: #fffea1;
content: attr(data-title);
position: absolute;
right: -40px;
top: -26px;
}

Я уникнув використання атрибута title, тому що не хочу відобразити ні «рідний», ні користувальницький тултип. У цій стратегії є деякі недоліки, про які вам потрібно знати. Вам доведеться хардкодить розташування підказки для того, щоб у елемента з тултипом біля краю вікна перегляду контент виходив за екран. В окремих випадках, однак, так можна злегка пожвавити базовий тултип.

Підказка 2: Огляд HTML

Я буду частенько переглядати сторінку і шукати не просто правильний текст і функціональність, а також переконуватися, що у елементів вірні атрибути; блискучий приклад тому – забезпечення правильних посилань HREF. Борознити для цього вихідний код набридає, а перевірка елементів займає вічність, тому я застосовую для відображення необхідної інформації content та attr:

/* покажіть гіперпосилання всередині контейнера «tooltip-links» */
.tooltip-links after a: {
content: attr(href);
display: none;
}
.tooltip-links a:hover:after {
display: inline-block;
}

Час від часу я отображаю вміст, встановивши основну непрозорість на 30%, іноді просто показую потрібну мені інформацію при проведенні мишею. Я виконав це рішення в Mozilla Developer Network в режимі редагування, відображаючи зведений текст SEO з спливаючій підказкою зверху самого тексту. Просте і блискуче рішення.

Не можу повірити, що так довго нехтував використанням attr і content. Це – відмінна штука, навіть коли просто допомагає при розробці. Крім того, attr і content чудово підходять для лічильників і локалізації; а ви для чого ними користуєтеся?