Иногда кнопке или изображению нужно прикреплять дополнительную информацию, для того чтобы пользователь понял, для чего она вообще нужна. Единственным решением является создание простых всплывающих подсказок. В этом уроке мы покажем вам, как создать подсказки на CSS: без изображений и javascript. “Зачем мне нужны CSS подсказки?” Конечно же вы можете использовать HTML атрибут title, для того чтобы организовать систему подсказок. Дело в том, что по умолчанию данные элементы нельзя стилизовать. Если вы хотите предоставлять своим пользователям красивые подсказки, то эта статья для вас. Что и как мы будем делать Наверняка данная техника вам знакома. Я буду использовать значения позиционирования relative и absolute, для того чтобы расположить подсказки. В этой статье я не пытаюсь изобрести колесо, просто пытаюсь создать красивые подсказки на CSS3. Ниже вы можете увидеть структуру (прошу заметить, что я использую псевдо элементы :before и :after): Теперь я бы хотел перечислить технологии, которые использовал:1 Градиент Тень Псевдо элементы HTML 1 <a href="#" class="tooltip"> 2 ваш текст 3 <span>ваша подсказка</span> 4 </a> Почему ссылка? Данное решение принято только по той причине, что нам надо добиться совместимости с IE6. Данный браузер зачастую не понимает псевдо класс :hover. 01 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 02 <script type="text/javascript"> 03 $(function() { 04 if ($.browser.msie && $.browser.version.substr(0,1)<7) 05 { 06 $('.tooltip').mouseover(function(){ 07 $(this).children('span').show(); 08 }).mouseout(function(){ 09 $(this).children('span').hide(); 10 }) 11 } 12 }); 13 </script> CSS 01 .tooltip 02 { 03 position: relative; 04 background: #eaeaea; 05 cursor: help; 06 display: inline-block; 07 text-decoration: none; 08 color: #222; 09 outline: none; 10 } 11 12 .tooltip span 13 { 14 visibility: hidden; 15 position: absolute; 16 bottom: 30px; 17 left: 50%; 18 z-index: 999; 19 width: 230px; 20 margin-left: -127px; 21 padding: 10px; 22 border: 2px solid #ccc; 23 opacity: .9; 24 background-color: #ddd; 25 background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); 26 background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); 27 background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); 28 background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); 29 background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); 30 -moz-border-radius: 4px; 31 border-radius: 4px; 32 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; 33 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; 34 box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; 35 text-shadow: 0 1px 0 rgba(255,255,255,.4); 36 } 37 38 .tooltip:hover 39 { 40 border: 0; /* IE6 fix */ 41 } 42 43 .tooltip:hover span 44 { 45 visibility: visible; 46 } 47 48 .tooltip span:before, 49 .tooltip span:after 50 { 51 content: ""; 52 position: absolute; 53 z-index: 1000; 54 bottom: -7px; 55 left: 50%; 56 margin-left: -8px; 57 border-top: 8px solid #ddd; 58 border-left: 8px solid transparent; 59 border-right: 8px solid transparent; 60 border-bottom: 0; 61 } 62 63 .tooltip span:before 64 { 65 border-top-color: #ccc; 66 bottom: -8px; 67 } Поддержка браузеров Данный код будет работать в IE6 и IE7, но возможны некоторые искажения в отображении.