Спливаюча підказка за допомогою CSS

Категорії статей: CSS ; 16.04.2010

Припустимо нам потрібно зробити на сайті коротке пояснення деяких термінів. Це можна зробити декількома способами, але ми розглянемо приклад спливаючої підказки, що реалізується за допомогою каскадних таблиць стилів.
Пригадаємо елемент <a>, в якого є декілька псевдокласів, один з них hover, який ми і використовуватимемо. Слово, яке ми хочемо пояснити спливаючою підказкою при наведенні курсора на нього, помістимо в елемент <a>, щоб користувача не перекинуло невідомо куди, вкажемо в якості адреси символ "#". Саму підказку помістимо в елемент <span>. Тобто отримаємо наступний HTML-код

Код
На данному етапі розвитку веб-будівництва все більше проявляється необхідність розділення вмісту сторінки і способів його оформлення. Оскільки такий підхід дозволяє максимально швидко і ефективно створювати і розвивати веб-сайти, за рахунок того що програмісти і дизайнери виконують свою роботу практично незалежно один одного.
Подібна реалізація можлива за допомогою <a href="#" class="vsl_help">CSS<span> Каскадні таблиці стилів</span></a>. CSS дозволяє одноразово задати параметри оформлення вмісту сторінки, після чого вони автоматично застосовуватимуться до вмісту веб-сторінки.

Аби відокремити елемент <a> від інших ми вказали йому клас "vsl_help". Але при перегляді даного коду ви, звичайно, не побачите спливаючих підказок. Текст підказки просто буде відображуватися на екрані. Аби він правильно відображувався потрібно попрацювати з властивостями.

По-перше, потрібно відключити видимість підказки у вихідному стані, це ми зробимо таким чином

Код
а.vsl_help span { display:none;}

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

Код
а.vsl_help { text-decoration: none; color:#000; border-bottom: dashed 1px #000; }

Тепер давайте подумаємо, що ми хочемо? Подумали?! Напевно, ми хочемо, аби підказка була або вище або нижче за наше слово, а це можна реалізувати елементом з абсолютним позиціонуванням. Так і зробимо

Код
а.vsl_help:hover span { position:absolute; display:block; left:10px; top:-16px; border:solid 1px #000; background:#ddd; color:#000; white-space:pre; padding:1px; }

Теперь для псевдокласу hover елементу <a> елемент <span> матиме вищеприведені властивості. Розберемо їх.
Властивість "position: absolute" робить елемент з підказкою абсолютно позиціонованним. Властивість "display: block" робить підказу видимою. Властивостями "left:10px; top:-16px;" встановлюємо позицію елементу. Властивістю "white-space: pre" забороняємо перенесення слів на новий рядок. Останні властивості задають зовнішній вигляд нашого елементу з текстом підказки.
Але і це ще не все. Ми визначили елемент <span> що абсолютно позиціює, також потрібно задати псевдокласу елемента <a> відносне позиціювання. Тоді елемент <span> абсолютно позиціюватиметься відносно "a.vsl_help:hover", і наші вказані вище значення "left:10px; top:-16px;" працюватимуть так як ми це задумали.

Код
а.vsl_help:hover { position:relative; }

У результаті отримаємо наступний код

Код
<html>

<head>
<title>Вспливаючі підказки</title>
<style>
body { font-family: verdana, sans-serif; font-size:13px; }
а.vsl_help { text-decoration:none; color:#000; border-bottom:dashed 1px #000; }
а.vsl_help span { display:none;}
а.vsl_help:hover { position:relative; }
а.vsl_help:hover span { position:absolute; display:block; left:10px; top:-16px;
border:solid 1px #000; background:#ddd; color:#000; white-space:pre; padding:1px;}
</style>
</head>
<body>
На данному етапі розвитку веб-будівництва все більше проявляється необхідність розділення вмісту сторінки і способів його оформлення. Оскільки такий підхід дозволяє максимально швидко і ефективно створювати і розвивати веб-сайти, за рахунок того що програмісти і дизайнери виконують свою роботу практично незалежно один одного.
<br> Подібна реалізація можлива за допомогою <a href="#" class="vsl_help">CSS<span> Каскадні таблиці стилів</span></a>. CSS дозволяє одноразово задати параметри оформлення вмісту сторінки, після чого вони автоматично застосовуватимуться до вмісту веб-сторінки.
</body>
</html>

Можна вставляти декілька підказок на сторінці. Досить буде пояснюване слово помістити в елемент <a> з класом "vsl_help", а саму підказку - в елемент <span>, так як це було зроблене вище.

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.43MB | 0.04Sec ad Google