Подсказка при наведении на ссылку как вк тёмного цвета

 

Всем привет... Скажите честно, вы хотели бы как-нибудь украсить свою ссылку при наведении, чтобы отображался не обчный title="" а что-нибудь красивое, прикольное и запоминающееся, что будет возвращать пользователей к вам на сайт все снова и снова, это очень интересный вид всплывающей подсказки при наведении на ссылку, данный вид подсказки похож чем-то на подсказки в соц. сети Вконтакте, а еще вы сможете применять данное решение к определенным ссылка а не ко всем сразу, так же сможете к каждой ссылке присвоить свой цвет прописав в css новое имя, ну вообщем пользуйтесь на здоровье и не забываем комментировать))) 

Установка: 

1. Подключаем скрипт, в верхнюю часть сайта между <hеаd> </hеаd> 

Quote (скопируйте и вставьте в нужный шаблон)
<script type="text/javascript"> $(function() { $('.tooltip').mouseover(function(){ $(this).children('div').fadeIn(2000); }) $('.tooltip').mouseout(function(){ $(this).children('div').fadeIn(1000); }) $('#tooltip_content').mouseover(function(){ $(this).children('div').fadeOut(2000); }) }); </script>

2. Дальше в таблицу стилей CSS, подключаем стили подсказки

Quote (скопируйте и вставьте в нужный шаблон)
.tooltip { position: relative; display: inline-block; text-decoration: none; outline: none; } .tooltip div { visibility: hidden; position: absolute; bottom: 40px; left: 50%; z-index: 999; width: 230px; margin-left: -127px; padding: 10px; border: 2px solid #000000; opacity: .9; background-color: #000000; -moz-border-radius: 4px; border-radius: 4px; cursor:auto; } .tooltip:hover { border: 0; /* IE6 fix */ } .tooltip:hover div { visibility: visible; } .tooltip div:before, .tooltip div:after { content: ""; position: absolute; z-index: 1000; bottom: -7px; left: 50%; margin-left: -8px; border-top: 8px solid #000000; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } .tooltip div:before { border-top-color: #000000; bottom: -8px; } .tooltip_text {color:#fff;}

3. Дальше, чтобы при наведении на ссылку, появлялась подсказка в этом окне, нужно ссылку прописывать по следующей конструкции. 

Quote (скопируйте и вставьте в нужный шаблон)
<a href="Ссылка" class="tooltip"> Текст ссылки<div class="tooltip_text">Тут текст всплывающей подсказки!</div></a>

на этом всё!

 
 
Источник: http://vk.cc/4jZB28
Поделиться…

Всем привет... Скажите честно, вы хотели бы как-нибудь украсить свою ссылку при наведении, чтобы отображался не обчный title="" а что-нибудь красивое, прикольное и запоминающееся, что будет возвращать пользователей к вам на сайт все снова и снова, это очень интересный вид всплывающей подсказки при наведении на ссылку, данный вид подсказки похож чем-то на подсказки в соц. сети Вконтакте, а еще вы сможете применять данное решение к определенным ссылка а не ко всем сразу, так же сможете к каждой ссылке присвоить свой цвет прописав в css новое имя, ну вообщем пользуйтесь на здоровье и не забываем комментировать))) 

Установка: 

1. Подключаем скрипт, в верхнюю часть сайта между <hеаd> </hеаd> 

Quote (скопируйте и вставьте в нужный шаблон)
<script type="text/javascript"> $(function() { $('.tooltip').mouseover(function(){ $(this).children('div').fadeIn(2000); }) $('.tooltip').mouseout(function(){ $(this).children('div').fadeIn(1000); }) $('#tooltip_content').mouseover(function(){ $(this).children('div').fadeOut(2000); }) }); </script>

2. Дальше в таблицу стилей CSS, подключаем стили подсказки

Quote (скопируйте и вставьте в нужный шаблон)
.tooltip { position: relative; display: inline-block; text-decoration: none; outline: none; } .tooltip div { visibility: hidden; position: absolute; bottom: 40px; left: 50%; z-index: 999; width: 230px; margin-left: -127px; padding: 10px; border: 2px solid #000000; opacity: .9; background-color: #000000; -moz-border-radius: 4px; border-radius: 4px; cursor:auto; } .tooltip:hover { border: 0; /* IE6 fix */ } .tooltip:hover div { visibility: visible; } .tooltip div:before, .tooltip div:after { content: ""; position: absolute; z-index: 1000; bottom: -7px; left: 50%; margin-left: -8px; border-top: 8px solid #000000; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } .tooltip div:before { border-top-color: #000000; bottom: -8px; } .tooltip_text {color:#fff;}

3. Дальше, чтобы при наведении на ссылку, появлялась подсказка в этом окне, нужно ссылку прописывать по следующей конструкции. 

Quote (скопируйте и вставьте в нужный шаблон)
<a href="Ссылка" class="tooltip"> Текст ссылки<div class="tooltip_text">Тут текст всплывающей подсказки!</div></a>

на этом всё!
Вернуться назад

Комментарии (0)

 
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход