<div class="demo"> <p>Пример работы простой подсказки выполненной с помощью CSS3 и HTML5. При наведении на <a href="#" data-tooltip="Я простая но очень нужная порой подсказка на CSS3">ссылку</a> появляется подсказка. Удобно использовать не прибегая к помощи специальных javascript и дополнительных плагинов. Данный метод вывода подсказки к ссылке, поддерживается всеми <a href="#" data-tooltip="Firefox, Chrome, Opera, Safari и IE10+ и даже старые версии IE, справляются с поддержкой, правда скругление углов и прозрачность вы в них не увидите">современными браузерами</a>.</p> </div>
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .demo { max-width: 550px; margin: 5% auto; font-family: "Trebuchet MS",Tahoma,Arial,sans-serif; } a { border-bottom:1px solid #bbb; color:#666; text-decoration:none; } a:hover, a:focus { color:#36c; } a:active { top:1px; } /** * Формируем стили подсказки */ /* атрибут элемента с подсказкой */ [data-tooltip] { display:inline-block; position:relative; /* определяем вид курсора если это не ссылка */ cursor: pointer; } /* по умолчанию скрываем содержимое подсказки */ [data-tooltip]:before, [data-tooltip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } /* формируем тело подсказки */ [data-tooltip]:before { background: #006104; /* фон для старых браузеров */ background: hsla(110,100%,17%,.9); bottom: 100%; margin-bottom: 6px; color: #f6f6f6; content: attr(data-tooltip);/* Часть кода, определяющая содержимое всплывающей подсказки */ font-size: 14px; width: 320px; /* устанавливаем необходимую фиксированную ширину, слова будут переноситься */ left: 0; padding: 7px 10px; position: absolute;/* обязательно позиционирум абсолютно */ text-shadow: 0 1px 1px hsla(0,0%,0%,1);/* тень для текста */ /* по желанию - скругляем углы тела подсказки */ -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } /* формируем указатель подсказки */ [data-tooltip]:after { border-top: 6px solid #006104; border-top: 6px solid hsla(110,100%,17%,.9); border-left: 6px solid transparent; border-right: 6px solid transparent; bottom: 100%; content: ""; height: 0; width: 0; left: 25px; position: absolute; } /* Показываем подсказку с указателем при наведении */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; transition: all 0.4s ease-in-out; /* добавляем плавности перехода */ }