Прості підказки на CSS
Реалізація простих підказок за допомогою атрибута data-title
Найпростіший варіант - це CSS-стилізація звичайної, текстової підказки. Для цього потрібно використовувати атрибут data-title. замість звичного title. щоб уникнути появи відразу двох підказок - з власним оформленням і стандартним, яке змінити не можна.
HTML конструкція виглядає так:
?
Атрибут tabindex для тегів, яким потрібно примусово надати фокус при натисканні - обов'язковий (!), Як і його значення - будь-яке ціле число. Інакше для посилання або іншого тега псевдоклас: focus не спрацює. Унікальність значення для даного атрибута на сторінці не важлива.
Підказка буде виводитися за допомогою псевдоелемента: before. оформленого відповідним чином.
span.support::before content: attr (data-title); / * Поміщаємо підказку в псевдоелемент * /
display: none; / * Приховуємо підказку * /
>
Щоб реалізувати поява даної підказки при натисканні застосовується такий CSS-код:
span.support:focus::before display: block;
>
Щоб зробити примусовий перенос рядка в підказці з стандартного атрибуту title або зробленої за допомогою альтернативного атрибута - data-title. досить в потрібному місці вставити HTML-символ перенесення - # 013;
Підказка з'являється при натисканні реалізація за допомогою тега посилання
Приклад, коли блок з підказкою знаходиться всередині посилання:
a.support:focus .tip display: block;
>
Розташування безпосередньо після посилання:
a.support-two: focus + .tip-block .tip-two display: block;
>
Додаткова обгортка блоку підказки - контейнер з класом .tip-block - використовується коли підказка розташована безпосередньо поруч із зухвалим її елементом, щоб щодо нього маніпулювати становищем підказки з абсолютним позиціонуванням.
tip-block display: inline-block;
position: relative; / * Обов'язково * /
background: transparent;
margin: 0;
padding: 0;
border: 0;
height: 0;
width: 1px;
>
Створення підказка з'являється при натисканні за допомогою тега INPUT
При використанні багатофункціонального тега форми HTML-конструкція трохи складніше ніж попередні. У прикладі також доданий додатковий елемент - хрестик для закриття підказки (тег
Перш за все потрібно прибрати осередок прапорця:
tip-checkbox display: none;
>
Показ підказки має таку структуру:
* .tip-three display: block;
>
Приховати спливає блок можна знову клікнувши на значок з питанням або по кнопці закриття підказки, оформленої відповідним чином.
Псевдоклас: checked застосовується до таких елементів як перемикачі (type = "radio") або прапорці (type = "checkbox"), коли вони обрані, при цьому дозволяючи маніпулювати основним і сусідніми (+ або
) Елементами, застосовуючи до них необхідні властивості.
На словах така хитрість або як кажуть - CSS: checked хак, буде звучати приблизно так: "Якщо прапорець встановлений, застосувати наступний стиль, до такого-то елементу." Приклад з цієї статті є одним з численних варіантів використання: checked.
Більш докладний опис можна подивитися тут (англ.).
Підказка з'являється при наведенні курсору
Для того щоб організувати висновок підказки на екран таким чином, досить замість псевдокласу: focus використовувати: hover.
наприклад:
a.support-hover: hover .tip display: block;
>
a.support-hover: hover + .tip-block .tip display: block;
>
- коли блок розташований безпосередньо поруч із зухвалим елементом.
Для всіх елементів, з відповідними селекторами. відразу можна задати загальні стилі, які будуть однакові для будь-якої конструкції:
- для основного блоку (елемента з класом .support):
support display: inline-block;
position: relative; / * Обов'язкове параметр * /
text-decoration: none;
cursor: pointer;
>
- оформлення вигляді кнопки (тег ):
support em background: # FF6600;
border-radius: 20px;
border: 1px solid # 999;
text-align: center;
color: #FFF;
font: normal bold 16px Arial;
padding: 0 4px;
>
- оформлення для блоку підказки - приховати його за замовчуванням, задати властивості визначають його положення і зовнішній вигляд:
tip,
span.support::before/*если використовується атрибут data-title * / display: none;
position: absolute;
z-index: 9998;
top: 0;
left: 100%;
background: #EDEDED;
text-align: left;
color: # 000;
cursor: default;
padding: 5px;
margin: -15px 0 0 10px; / * Регулює положення, значення залежать від застосовуваної конструкції * /
width: 200px;
min-height: 50px;
height: auto;
>
Деякі браузери, зокрема Google Chrome, при отриманні елементом фокусу, обрамляють його в рамку, це звичайно дуже корисно, але не в даному випадки. Позбутися від такої рамки можна за допомогою CSS, задавши відповідні властивості для потрібної посилання.
У нашому прикладі це виглядає так:
*: Focus outline: none;
>
Тепер, залежно від використовуваного варіанта, залишилося організувати функціонал підказки, який полягає в застосуванні псевдокласів.
На цьому пака що все.
Круто. Можна вас попросити, зробити щоб контент розміщувався не всередині тега "a" в як у вас у другому прикладі що на скриптах зроблено? Але другому прикладі застосовується скрипт, якщо його не використовувати, то при кліці по відкрився блоку він пропадає, а якщо скрипт не відключати, то закрити блок можна тільки якщо натиснути на хрестик, а хотілося як в першому варіанті з будь-якого місця екрану. Хотілося щоб без скриптів, трохи змінити перший варіант щоб контент був як у другому було б здорово. Дякуємо
Таке зробити можна, але це вже зовсім інша історія і зовсім інший код. Для такого варіанту можна використовувати IMPUTи і псевдоклас: checked. але тоді CSS потрібно прописувати окремо для кожної підказки. Варіант зі скриптом найпростіший, тому і зроблений по мінімуму, чим більше функцій - тим більше код, це вже буде не простий скрипт, а цілий плагін. Якщо вам потрібно без скрипта то використовуйте цей варіант, всередині можна розмістити все. крім посилань.
перепрошую, трохи поміркував, все в порядку, цей варіант що без скрипта підходить, але ось зіткнувся єдине з однією проблемою, посилання розміщувати в блоці можна також кликати теж можна, але от якщо розмістити в цьому блоці тег список (select-> option) і клікнути по списку, то блок відразу зникає, я так розумію тут вже це не виправити? А можна в новому скрипті зробити щось, щоб не використовувати плагін hoverIntent?
Користувався вашим підказкою близько 6 місяців і все працювало. Але з недавніх пір, підказка працювати перестала.
Я спробував використовувати інші сервіси для моєї ідеї і це не допомогло, результат однаковий. У той же час якщо в підказці стоїть текст, то все працює правильно. І якщо клацати текст всередині підказки, його можна виділити, скопіювати і навіть подивитися код html / Підказка зникає при кліці нема на неї, а в іншій області екрану.
Виходить різниця стала в тому, що якщо я використовую кнопки то при натисканні на підказці вона зникає, а при використанні тексту всередині підказки вона залишається і я повинен сам її закрити клацнувши в іншому місці екрана (тобто як мені і потрібно).
Як мені зробити щоб підказка не зникала і спрацьовувала кнопка соц.сетей розуму не прикладу. Буду радий будь-яких ідей.
Спасибі, що відповіли мені. Зараз я вирішив проблему, і цей варіант мене начебто влаштовує.
Як я вже говорив раніше все працювало, і чесно кажучи все це штовхає мене на думку, що світ перевернувся і змінилася якась валідація для псевдокласу focus. Я замінив його на hover і все запрацювало.
Тепер при наведенні мишкою вилазить підказка і кнопки клікабельні.
Дякую за матеріал) Дуже просто, доступно і дохідливо, а головне з урахуванням вимог по мінімізації всього до чого дотягуєшся) Так тримати)
Добрий день.
Додаткова обгортка - контейнер з класом .tip-block - використовується для того, щоб щодо нього маніпулювати становищем підказки з абсолютним позиціонуванням.
Питання, чому якщо прибрати повністю цей ^ span class ".tip-block" ^ ^ / span ^ то підказка не з'являється? знак питання змінює свій колір, але підказка не з'являється. Хоча написано що він потрібен для того щоб відносно нього маніпулювати становищем підказки.