» »

Простая подсказка Tooltip на CSS3 для uCoz


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

14.05.2016 Просмотров: 412 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
feliksteg
feliksteg 15.05.2016 01:301
0
В первые слышу если место мало, что можно применить этот скрипт. Его вообще то ставят как подсказку и большие мемуары не пишут в нем. Но каждому виднее.
feliksteg
feliksteg 15.05.2016 19:132
0
Но только могу представить в статье, если брать вверх сайта, то если много будет знаков, половина можно не увидеть.
Webmaster6044
Webmaster6044 26.08.2016 03:423
0
Спасибо, пригодится cool cool cool
avatar