Отлично сделана и в тоже время простая подсказка в тексте 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; - что будет отвечать за ширину, но длинна будет автоматически выставятся, от текста, что вы написали.
|