Простая подсказка Tooltip на CSS3 для uCoz
 | |
| Отлично сделана и в тоже время простая подсказка в тексте Tooltip на CSS3 для uCoz. Которую можно применить везде, а также кому места не хватило написать. И здесь вы выбираем ключевое слово и ставим на ее такую стильно сделанную подсказку. Вы пишите описание и применили словосочетание, который не известно большому кругу. И здесь вы как раз можете сделать этот код. Как сами можете заметить он отлично впишется в текст. И еще ему можно даже выставить ссылку, что возможно у вас есть какие то схожие материалы и на ее поставить. Что по установке, все очень просто, вам для начало нужно прописать стили в CSS и потом уже взять код, который и будет взаимодействовать и появится темно прозрачная гамма, где вы сами выставляете ширину, так как можно только пару слов написать или несколько предложений. Код <a href="#" title="Здесь как раз пишем, что будет появляться" class="tooltip"><span title=""><b>ИНФОРМАЦИЯ О САЙТЕ ZORNET.RU</b></span></a> CSS: Код .tooltip{ display: inline; position: relative; } .tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 320px; } .tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; } В стилях находим width: 320px; - что будет отвечать за ширину, но длинна будет автоматически выставятся, от текста, что вы написали.  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
