Всплывающие подсказки к ссылкам и тексту на CSS

Подсказки к ссылкам на CSS

WEB - страница

Для просмотра Примера 1 наведите курсор мыши на любую ниже ссылку:

Если Вы нажмете на эту ссылку, то попадете на сайт с великалепными фото Лошадей, Цветов и Бабочек.Ссылка на красивые фото Лошадей Внимание! Ни в коем случае не нажимайте на эту ссылку, иначе Вы увидете, как падал Челябинский метеорит!Ссылка предупреждение!

Код в документе HTML или в CSS

Стиль для первой (информационной) подсказки:

<head> <style> .tooltip { position:relative; z-index:24; } .tooltip span { display:none;} .tooltip:hover {z-index:25;text-decoration:underline;} .tooltip:hover span { display:block; position:absolute; width:120px; top:25px; left:20px; background-color:#e6ffe6; border:1px solid #333333; padding:5px; font-size:11px; color:#333333; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; } </style> </head>

Стиль для второй (предупреждающей) подсказки:

<head> <style> .warning { position:relative; z-index:24; } .warning span { display:none; } .warning:hover {z-index:25;text-decoration:underline;} .warning:hover span { display:block; z-index:25; position:absolute; width:250px; top:25px; left:20px; background:#ffdfdf url(warning.gif) no-repeat left; border: 1px solid #990000; padding:5px 5px 5px 35px; font-size:11px; color:#990000; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; } </style> </head>

Оформление ссылки в документе HTML:

<a href="http://mila.kcbux.ru/lochagy/lochagy.html" class="tooltip" target="_blank"><span>Если Вы нажмете на эту ссылку, то попадете сайт с великалепными фото Лошадей, Цветов и Бабочек.</span>Ссылка на красивые фото Лошадей</a> <a href="http://kcbux.ru/Statyy/ZA_zizny/za-008_meteorit.html" class="warning" target="_blank"><span>Внимание! Ни в коем случае не нажимайте на эту ссылку, иначе Вы увидете как падал Челябинский метеорит!</span>Ссылка предупреждение!</a>

Всплывающие подсказки к тексту (картинке) на CSS

WEB - страница

Для просмотра Примера 2 наведите курсор мыши на слово или картинку ниже:

Наведите курсор на это СЛОВОВсплывающая подсказка к тексту. для подсказки.

Всплывающая подсказка к картинке.

Код в документе HTML или в CSS

Стиль для всплывающей подсказки:

<head> <style> .help { color: #2C8505; outline: none; /*цвет подсказки*/ cursor: help; text-decoration: none; /*вид курсора при наведении, можно заменить на pointer*/ position: relative; /*позиция*/ } /*положение всплывающей подсказки*/ .help span { margin-left: -999em; position: absolute; } /*подсказка при наведении курсора*/ .help:hover span { font-family: Verdana, Tahoma, sans-serif; /*шрифт*/ position: absolute; /*позиция*/ left: 10px; top: 25px; z-index: 99; margin-left: 0; width: 200px; /*ширина блока подсказки*/ } /*параметры изображения*/ .help:hover img { border: 0; } /*блок всплывающей подсказки*/ .podhelp { background: none repeat scroll 0 0 #008000; /*цвет и прозрачность фона*/ border: 1px solid #2b82b8; /*параметры бордюра*/ border-radius: 5px; /*закругление углов*/ box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); /*тень блока*/ color: #ffffff; /*цвет шрифта всплывающей подсказки*/ padding: 5px; /*внутренний отступ*/ } </style> </head>

Оформление подсказки в документе HTML:

Для текста: <a class="help" href="#">СЛОВО<span class="podhelp">Всплывающая подсказка к тексту.</span></a> Для картинки: <a class="help" href="#"><img src="image_ico/info24.png" alt="подсказка" /><span class="podhelp">Всплывающая подсказка к картинке.</span></a>

вверх