Від автора: привіт. Підказка - це невеликий пояснювальний текст, який з'являється при наведенні на якийсь елемент, зазвичай на картинку. Сьогодні ми подивимося, як можна зробити в html підказку різними способами.

Стандартна підказка

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

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

< img src = "tiger.jpg" title = "Це тигр" >

Там може бути як одне слово, так і кілька речень. І ось так це виглядає:

Підказка з'являється плавно, не відразу після наведення, а згодом. Це поведінка, закладена за умовчанням.

Основна проблема такої підказки її неможливо стилізувати. Як вирішувати цю проблему? Доведеться підказувати іншими способами. Зараз покажу вам парочку.

Спосіб на чистому css

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

< div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div >

Незрозумілим вам тут може бути лише атрибут data-name. Справа в тому, що це так званий data-атрибут, який сам по собі нічого не робить, але його значення можна використовувати в css і JavaScript, що робить його корисним у деяких випадках. Далі ви побачите це.

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

#tiger(position: relative; display: inline-block; )

#tiger( position: relative; display: inline-block;

Блочно-рядкове відображення перешкодить блоку (а разом з ним і блоку з підказкою, якою ми створимо) розтягнутися на всю ширину вікна. Залишилося створити саму підказку. У css це дуже зручно робити за допомогою псевдоелементів. Ось так:

#tiger:hover:after (content: attr(data-name); position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%;

#tiger:hover:after ( content: attr (data-name); position: absolute; left: 0; bottom: 0; background: rgba (5, 13, 156,. 55); color: #fff; text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%;

Кода багато, але нічого складного тут нема. Селектор #tiger:hover:after означає наступне: коли ми наводимо курсор на блок з картинкою, потрібно створити псевдоелемент after (і далі у фігурних дужках перераховуються правила). Властивість content: attr(data-name) задає текстове значення блоку. Воно дорівнюватиме тому, що записано в атрибуті data-name у блоку-обгортки картинки.

Ця підказка з'являється при наведенні на картинку, але на відміну від стандартної вона робить це різко, а сама поява відбувається безпосередньо в момент наведення. Плавна поява в цьому випадку реалізувати не вийде, тому що для псевдоелементів плавні переходи не підтримуються.

Спосіб 2. Чистий css та плавна поява

Втім, зовсім небагато переписавши код можна домогтися плавної появи підказки, причому, знову ж таки, не використовуючи JavaScript.

Щоб самостійно побачити два ефекти, які я покажу вам далі, я рекомендую відкрити блокнот або будь-який зручний редактор коду і повторювати все за мною. Правда для цього ще потрібно підключити стильовий файл, хоча стилі можна писати і в HTML у тегах

Отже, код цього прикладу трохи відрізнятиметься, і це з тієї причини, що ми не будемо використовувати псевдоелемент. Саме через нього неможливо було застосувати плавні зміни. На цей раз код виглядатиме так:

Суматранський тигр

< div id = "tiger2" > < img src = "tiger.jpg" > < div class = "text" >Суматранський тигр< / div > < / div >

CSS код не зазнав якихось величезних змін:

#tiger2( position: relative; display: inline-block; ) #tiger2 .text ( transition: all 0.6s; opacity: 0; position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.). 55); color: #fff;text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; transform: scale(0); ) #tiger2:hover .text ( opacity: 1; )

#tiger2( position: relative; display: inline-block; #tiger2 .text ( transition: all 0.6s; transform: scale (0); #tiger2:hover .text( opacity: 1;

Забираємо тільки властивість вмісту, оскільки воно підтримується лише псевдоелементами. Дописуємо властивість transition, яка створює плавні переходи станів. Ну а opacity: 0 дасть нашому блоку з підказкою повну прозорість, тому його не буде видно на сторінці.

При наведенні на блок тепер достатньо повернути нормальну прозорість з підказкою. Готово. Можете перевірити, чи елемент з'являється плавно.

За допомогою CSS3 можна приховати елемент і по-іншому. За допомогою трансформацій, наприклад. Замініть повну прозорість на таку властивість: transform: scale(0) і розмір блоку буде зменшений до нульового, так що його просто не буде на екрані. При наведенні на блок з картинкою слід повернути нормальний розмір ось так: transform: scale(1). У такому разі ефект появи виглядатиме ще красивіше. Можете переконатися у цьому самі.

Як бачите, на css підказка також може з'являтися повільно з красивими ефектами.

Інші способи

Більше можливостей вам може дати jQuery. За допомогою цієї бібліотеки можна написати код для виведення підказки як самостійно, так і знайти якусь плагін, яка вже реалізує цю справу.

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

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

Влад Мержевич

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

Як приклад я вибрав фотографії, при наведенні на них курсору миші відображається назва фотографії. Сам висновок тексту робитимемо з допомогою властивості content і брати значення тексту з будь-якого атрибута через attr() . На жаль, content не буде працювати бажаним чином у поєднанні з img , тому фотографії вставляються в елемент , до якого додаємо атрибут data-title з текстом підказки. Є спокуса вставити атрибут title і задіяти його, але в такому разі виводитиметься одночасно дві підказки: одна «рідна», а друга наша. Так що ми використовуємо свій власний атрибут data-title, благо HTML5 дозволяє це робити. Таким чином, отримаємо наступний код (приклад 1).

Приклад 1. Код HTML

HTML5 IE Cr Op Sa Fx

Підказка, що спливає на CSS

Переходимо до стилю нашої підказки. Спершу треба зробити, щоб вона взагалі з'являлася. Для цього скористаємося псевдоелементом :: after, до якого додаємо content: attr (data-title).

Photo::after ( content: attr(data-title); )

Вийде, що після вмісту елемента з класом photo виводитиметься текст з атрибуту data-title , що нам потрібно. Але оскільки підказка повинна з'являтися тільки при наведенні на фотографію курсора миші, додамо ще псевдоклас :hover .

Photo:hover::after ( content: attr(data-title); )

Залишається тільки встановити бажаний стиль нашої підказки, зокрема, положення, колір фону, тексту, рамку та ін. (Приклад 2).

Приклад 2. Стиль підказки

HTML5 CSS3 IE Cr Op Sa Fx

Підказка на CSS .photo ( display: inline-block; /* Рядково-блоковий елемент */ position: relative; /* Відносне позиціонування */ ) .photo:hover::after ( content: attr(data-title); / * Виводимо текст */ position: absolute; /* Абсолютне позиціонування */ left: 20%; top: 30%; /* Положення підказки */ z-index: 1; 255,255,230,0.9);/* Напівпрозорий колір фону */ font-family: Arial, sans-serif; / border: 1px solid #333; /* Параметри рамки */ )

Результат цього прикладу показано на рис. 1.

Мал. 1. Вигляд спливаючої підказки

Положення підказки не залежить від позиції курсору, вона з'являється в тому самому місці при наведенні курсору на зображення. Можна зробити, щоб підказка виводилася в нижній частині фотографії, так вона не закриватиме велику частину картинки. Стиль у своїй зміниться незначно (приклад 3).

Приклад 3. Виведення підказки знизу фотографії

HTML5 CSS3 IE Cr Op Sa Fx

Підказка на CSS .photo ( display: inline-block; /* Рядково-блоковий елемент */ position: relative; /* Відносне позиціонування */ ) .photo:hover::after ( content: attr(data-title); / * Виводимо текст */ position: absolute;/* Абсолютне позиціонування */ left: 0; right: 0; bottom: 5px; rgba(0,42,167,0.6);/* Напівпрозорий колір фону */ color: #fff; /* Колір тексту */ text-align: center; /* Гарнітура шрифту */ font-size: 11px; /* Розмір тексту підказки */ padding: 5px 10px;

Результат цього прикладу показано на рис. 2.

Мал. 2. Вигляд спливаючої підказки

На жаль, властивість transition, за допомогою якого можна зробити анімацію підказки, не працює із псевдоелементами. Тому доведеться задовольнятися різкою появою нашої підказки. Також не буде жодного ефекту в браузері IE8 і молодше, ця версія не підтримує :: after. Втім, якщо замінити цей псевдоелемент на after, то можна отримати більш-менш працюючий варіант.

Гуру верстки навряд чи знайдуть у цьому пості щось нове собі. Цей пост скоріше для верстальників-початківців у яких, як і в мене, були проблеми зі створенням і стилізацією універсальних підказок.

Нещодавно, коли я робив невеликий блог, переді мною постало завдання зробити стильні, але водночас прості підказки. Спробувавши різні способи створення окремих div-контейнерів для підказок, або створення підказок на чистому CSS, я знайшов універсальне рішення, яке не буде захаращувати код, буде кроссбраузерним, і в той же час буде дуже простим для реалізації.
Усіх, кого зацікавив мій спосіб вирішення цього простого завдання, прошу під кат.

Рішення Спосіб, який я вам запропоную, досить простий та ефективний. Працює у всіх браузерах, навіть у ІЕ 6 (Багаторазово тестовано мною). Легко змінний і зручний. Не захаращує код і робить його наочним. Його можна легко змінити на свої потреби. Наприклад, зробити затримку виведення підказки через setTimeout або інше.HTML Припустимо у нас є HTML-сторінка з посиланням, при наведенні на яку нам потрібно вивести підказку:
Підказки Посилання
Як ви вже могли помітити з лістингу, я використовую css-препроцесор LESS.
Ми підключили до окремих файлів CSS-стилі та скрипти. Ще у нас є одне посилання та блок div, який і буде контейнером для підказки.
Специфікація HTML5 дозволяє використовувати атрибути типу data-atribute, в яких можна зберігати деяку інформацію про елемент або блок. Саме в data-атрибутах ми зберігатимемо текст підказок.
Посилання
Для зберігання я використовую атрибут data-tooltip.
C HTML закінчили - можна перейти до стилів.CSS Я використовую бібліотеку LESS Elements і всім раджу, тому деякі властивості я напишу з використанням цього фреймворку.
@import "css/elements.less"; #tooltip ( z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; rounded(5px);
З лістингу зрозуміло, що у першому рядку ми підключаємо LE, задаємо блоку div#tooltip абсолютне позиціонування і приховуємо його. Далі ми задаємо блоку фоновий колір і колір тексту, робимо заокруглення куточки (5px) і встановлюємо значення прозорості на 50%. Ну а тепер найцікавіше - jQuery.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject)) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "top" : 0, "left" : 0 )); )); )); // Ready end.
Тепер ми додаємо у вибірку всі елементи з атрибутом data-tooltip і при наведенні на потрібний елемент мишею отримуємо значення підказки та зберігаємо його у змінній. Далі додаємо текст підказки до блоку #tooltip, задаємо йому координати курсору від краю станиці + 5 px і нарешті виводимо блок із підказкою в потрібному місці. Після відходу миші з елемента ми ховаємо блок #tooltip, чистимо його вміст і повертаємо до 0;0;.

От і все!
У результаті ми отримаємо щось таке: Демо

Завдяки такому простому скрипту всі елементи на сторінці, які мають атрибут data-tooltip, отримають підказку.

Дякую за увагу!

HTML підказка — це блок із додатковою інформацією, який з'являється при наведенні курсору миші на певний елемент веб-сторінки. Сьогодні ми створимо власну підказку за допомогою HTML і CSS :

Подивитись демо-версію | Завантажити вихідний код

Ми можемо використовувати CSS підказки для більшості елементів, таких як посилання, теги, стилізований текст і т.д. Нам потрібно буде застосувати до елемента кілька класів і додати атрибут data- з текстом підказки.

Налаштування документа

Нам потрібно створити HTML-документ та задати вихідну розмітку:

Tooltips Demo // контент

Я додав посилання на Normalize.css , яка допомагає скинути всі стилі браузера за промовчанням, і гарантує, що кожен елемент виглядатиме однаково у всіх браузерах. На відміну від стандартного скидання, CSS Normalize.css не видаляє всі стилі за промовчанням, так що вам не потрібно буде переписувати стиль кожного елемента з нуля.

Я створив div з класом container, в який ми помістимо основні приклади підказок HTML. Ось стилі для body та класу .container :

body ( font-family: "Work Sans", sans-serif; font-size: 1.5em; line-height: 1.4em; font-weight: 700; background-color: #28ABE3; color: #fff; ) .container ( width: 800px; margin: 100px auto; background: radial-gradient( circle farthest-corner at 400px 250px , #64BBE0 0%, #28ABE3, #28ABE3 95%); )

Я відцентрував div контейнер, надавши для margin-left та margin-right значення auto . Також додав кілька стилів для розділу body, щоб він виглядав краще.

Я вирішив додати для фону невеликий світлий CSS-градієнт. Якщо браузер не підтримує CSS-градієнти (це стосується в основному IE 8 і 9), колір фону буде перемикається назад на синій за промовчанням (колір фону розділу body).

Я буду використовувати підказки HTML при наведенні з тегами анкорів, але ви можете призначити класи інших вбудованих елементів, таких як strong tag або span . Нижче наведено вміст контейнера div:

• Tooltip bottom
• Tooltip left

  Я призначив для посилань два класи. Клас tooltip відповідатиме за тіло підказки, а другий — визначатиме її розміщення.

  Ви також можете бачити атрибут користувача data- , який містить текст нашої HTML підказки.

  Створення класу tooltip

  Нижче наведено код класу tooltip:

  Tooltip ( position: relative; ) .tooltip:after ( position: absolute; padding: 8px; border: 3px solid #fff; border-radius: 8px; background-color: #1FDA9A; : bold; color: #ffff; content: attr(data-tooltip); min-width: 80px; : 0; transition: all .2s ease-in-out .25s; visibility: hidden; z-index: 2; ) .tooltip:hover:after ( opacity: 1; visibility: visible; )

  Сама HTML підказка при наведенні — це псевдоелемент :after , вона позиціонується абсолютно. Ось чому необхідно присвоїти відносну позицію елементу анкору. Я додав кілька основних стилів, таких як відступ, рамка, розмір шрифту та ширина. Давайте уважніше розглянемо властивість content.

  Воно містить attr() — значення, в якому зберігаються наші data-tooltip , і використовує їх, щоб вивести текст самої підказки. Замість data-tooltip можна використовувати будь-яке інше ім'я, просто переконайтеся, що воно починається з data- . Більше про ці атрибути ви можете дізнатися тут .

  Тіло підказки має мінімальну ширину 80 пікселів. Якщо потрібно, щоб вміст підказки розтягувався в один рядок, додайте для властивості ширини значення max-content , яке в даний момент винесено в коментарі. Слід зазначити, що це експериментальна функція, тому ви повинні використовувати вендорні префікси -webkit- та -moz-.

  Щоб задати HTML підказки при наведенні ефекту слайд-анімації, ми використовуємо властивість transition . Зверніть увагу на значення .25s , яке вказує на затримку перед тим, як підказка відображається або приховується. Таким чином, вона не буде виводитися, якщо ви наведете курсор миші на текст помилково, а тільки при наведенні курсору на більш тривалий час. Я також поставив непрозорість 0 і видимість hidden. Ми не можемо використовувати display: none; тому що елемент повністю зникне, і ми не побачимо будь-яких ефектів переходу. Непрозорість і видимість змінюються при наведенні елемент покажчика миші.

  Результат:

  Подивитись

  Примітка: Я змінив / видалив частину розмітки та стилів у демо-версії на CodePen . Щоб побачити остаточний результат, перегляньте демонстраційний приклад наприкінці цієї статті.

  Додавання руху

  Тепер, коли ми реалізували появу / зникнення HTML підказки при наведенні, давайте змусимо її рухатися. Ми вже призначили властивість анімації, і нам залишилося задати вихідну позицію, звідки вона має з'являтися і кінцеву:

  /*Вихідна позиція підказки*/ .tooltip-top:after ( bottom: 150%; left: 0; ) .tooltip-bottom:after ( top: 155%; left: 0; ) .tooltip-left:after ( right: 130%; min-width: 100px; ). ) .tooltip-bottom:hover:after ( top: 125%; ) .tooltip-left:hover:after ( right: 110%; ) .tooltip-right:hover:after ( left: 110%;

  Я вирішив додати цей функціонал додаткових класів. Таким чином, якщо ви призначите, наприклад, клас.

  Подивитись демо

  У цій демо-версії я використовую клас .tooltip-right. Ви можете поекспериментувати та застосувати різні класи, щоб задати різні позиції спливаючої підказки HTML.

  Створення трикутника

  Останнім елементом підказки є маленький трикутник на одній зі сторін блоку. Ми створимо його за допомогою псевдокласу: before (псевдоклас: after вже використаний для самої підказки). Ми призначаємо його для чотирьох класів позиції, щоб кожної з них трикутник виводився відповідно:

  /** * Трикутники */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before ( content: ""; display: block; width: 7px; border-style: solid; border-color: rgba(0, 0, 0, 0); opacity: 0; transition: all.2s top:hover:before, .tooltip-bottom:hover:before, .tooltip-left:hover:before, .tooltip-right:hover:before ( opacity: 1; visibility: visible; )

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

  Забезпечення додаткової інформації про потенційно складні елементи інтерфейсу користувача є дуже важливою частиною роботи веб-дизайнера при розробці зручного та доступного веб-сайту.

  Одним з широко використовуваних механізмів для виведення додаткових відомостей, крім тих, що видно на сторінці, є підказки (елементи дизайну для відображення підказок про певні елементи на екрані).

  У той час, як існує багато інноваційних рішень з використанням CSS і JavaScript (з або без використання фреймворку JavaScript, наприклад, jQuery), іноді корисно поглянути на те, як нові технології струшують методи, що давно використовуються.

  У цьому уроці буде показано, як з використанням тільки CSS можна зробити чудові крос-браузерні підказки.

  Підказки - це круто!

  Де б не потрібно було пояснити абревіацію або акронім, пояснити значення слова або дати додаткову інформацію про щось, підказки будуть простим, але ефективним рішенням.

  Починаючи з маленького жовтого блоку з текстом, який з'являється над елементом, таким як зображення, і виводить зміст атрибуту title (або атрибута alt , якщо ви на жаль використовуєте Internet Explorer) до заснованих на скриптах витончених рішень з використанням, підказки є фантастичним інструментом, який, здається, мало популярний у спільноті дизайнерів.

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

  Посилення ефекту впливу спливаючих підказок

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

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

  

  Що ми збираємось зробити

  У цьому уроці ми збираємося зробити підказки на чистому CSS.

  Це означає, що вони будуть працювати в браузерах, які не підтримують CSS3 (таких як Internet Explorer 8 і старше) — вони будуть виглядати в них не так добре, як у нових браузерах.

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

  Розширення CSS3

  Використання простих, але ефективних розширень, таких як властивості border-radius і box-shadow дозволяє надати звичайному прямокутнику нового повідомлення і симпатичний вигляд.

  Що у нас під капотом?

  Почнемо з коду HTML для прикладу.

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

  Для того, щоб дати вам достатньо ідей для ваших власних проектів, ми зробимо п'ять різних типів підказок.

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

  

  Крос-браузерна сумісність

  Цей механізм повинен працювати у всіх браузерах, проте, якщо вам потрібно, ви можете змінити його на власний розсуд.

  Основна розмітка

  У наведеному нижче коді ми використовуємо універсальний шаблон XHTML 1.0 зі звичайним елементом .

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

  Також ви можете додати код jQuery або JavaScript для покращення ефектів та функціональності, якщо хочете!

  Розмітка HTML Підказки, що випливають Приклад підказок, що випливають із CSS!

  Наведіть курсор миші на написи, щоб побачити: класичну підказку, критичне повідомлення Це просто приклад того, як зробити підказки з використанням CSS!, допомога ДопомогаЦе просто приклад того, як зробити підказки з використанням CSS! ІнформаціяЦе просто приклад того, як зробити підказки з використанням CSS! та попередження Це просто приклад того, як зробити підказки з використанням CSS!.
  Це просто приклад того, як підказати з використанням CSS!

  У коді використовується елемент (нічого особливого з ним не пов'язано) та параграфи (

  ) для тексту, які містять елементи посилань (Для яких встановлений клас "tooltip").

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

  Причина того, що ми використовуємо тег a, а не abbr, dfn або span, полягає в тому, що IE6 неповно підтримує псевдо-селектор:hover для інших елементів, відмінних від a.

  Якщо ви не збираєтеся підтримувати IE6, можна використовувати інший тег.

  

  Для кожного елемента span у прикладі встановлений клас classic (для звичайної підказки) або custom (з critical , help , info або warning , які відповідають використовуваної колірної схеми).

  Таке використання стилів також має пару бонусів у вигляді елемента em (встановлює заголовок спливаючої підказки) та зображення (яке використовується як іконка у спливаючій підказці, ви можете використовувати свої зображення).

  CSS

  У нас написаний код HTML для сторінки і настав час змусити спливаючі підказки робити їхню роботу.

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

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

  Друга частина коду просто приховує підказку, доки вона не буде потрібна.

  Все дуже просто!

  Стилі CSS для класу.tooltip .tooltip ( border-bottom: 1px dotted #000000; color: #000000; -999em;position: absolute;

  Вміст підказок, що випливають, видаляється з поля зору за допомогою негативного значення властивості margin-left , а не display: none або visibility: hidden , оскільки деякі програми для читання з екрану ігнорують зазначені властивості.

  Стилі CSS для спливаючих підказок

  Незабаром ми встановимо функціонування підказок для однакового відображення в різних браузерах. А зараз додамо кілька рядків коду CSS.

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

  CSS для відображення спливаючої підказки. : 250px; ) .tooltip:hover img ( border: 0; margin: -10px 0 0 -55px; float: left; position: absolute;) . serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; ). 2em; ) * html a:hover ( background: transparent; ) Необхідність рядка * html

  У вас може виникнути питання, для чого включений останній рядок у наведеному вище коді? Вона встановлює прозорість для фону посилання. Під час тестування підказок виявився дивний ефект в IE6, який не піддавався видаленню до тих пір, поки існував фон посилання!

  

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

  Задаємо колірну схему для підказок/

  Нижче наведений код визначає для кожного з п'яти стилів підказок колірну схему.

  Після зміни коду сторінки та оновлення її в браузері, підказки будуть виводитися при наведенні курсору миші на посилання майже однаково у всіх браузерах.

  Код CSS для колірної схеми .classic ( background: #FFFFAA; border: 1px solid #FFAD33; ). 2BB0D7; ) .info ( background: #9FDAEE; border: 1px solid #2BB0D7; ) .warning ( background: #FFFFAA; border: 1px solid #FFAD33; )

  Код CSS дуже простий, але він надає чудового вигляду підказкам і виконує свою функцію скрізь. Колірну схему можна змінити на власний розсуд.

  Декілька штрихів CSS3 для просунутого відображення спливаючих підказок

  Перед тим, як закінчити урок, вставимо кілька рядків коду CSS3 для надання візуальних ефектів нашим підказкам. Встановимо заокруглені кути за допомогою властивості border-radius і надамо об'ємності за допомогою властивості box-shadow.

  Оскільки жодна з цих властивостей не підтримується глобально, то працюватимуть вони лише в деяких нових версіях браузерів. Але там, де вони будуть діяти, підказки будуть виглядати гладенько і сексуально!

  

  Додамо нижче наведений код у селектор.tooltip:hover span та оновимо сторінку.

  Візуальні ефекти для рамки, тіні та прозорості піднімають підказку над текстом сторінки і роблять інформацію контрастною і легкою для читання.

  Ви можете помітити, що використовуються не лише офіційні властивості CSS3, а й розширення для Mozilla та WebKit.

  Додаткові властивості CSS для нових браузерів: border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

  

  Резюме

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