Простой tooltip с поддержкой html-тегов на jQuery
3.02
10
Давно я уже ничего не писал на сайте, но вот решил поделиться с народом, недавно обнаруженным, интереснейшим плагином на jQuery.37 508
В данной статье я не буду рассказывать как устроен данный плагин, это уже сделано на сайте
Я лишь хочу показать часть из областей применения этого на удивление легковесного (по сравнению с встречавшимися мне ранее), но функционального плагина.
Показывать я буду, естественно, на движке DLE.
Вместо демо предлагаю посмотреть на сайт CinemaMir.com в коментариях при наведении мышки на аватар пользователя, при наведении на некоторые ссылки, а так же при публикации новости (надо регистрироваться) у каждого заполняемого поля есть небольшой знак вопроса - своего рода инструкции по заполнению полей, Вы можете видеть работу данного плагина.
Так же на моём
Итак:
1. Для начала создадим в папке с действующим шаблоном подпапку js - это делаем для удобства, чтобы не путаться куда кидать яваскрипты в будующем.
Не забудьте скопировать в папку js файл .htaccess например из папки css, иначе DLE не будет грузить наши яваскрипты.
2. Удобным для Вас способом подключаем библиотеку jQuery:
- Либо заливаем файл jquery из прикреплённого архива в папку js и пишем перед </head> в main.tpl <script src="{THEME}/js/jquery.js" type="text/javascript"></script>
- Либо "говорим" двигу чтобы он "брал" библиотеку с googlecode:
Пишем перед </head> в main.tpl
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>3. Загружаем наш плагин tooltip.js в папку js, и ниже строк, где прописано подключение библиотеки пишем:
<!-- Тултип -->
<script src="{THEME}/js/tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
l_tooltip(".ttp_lnk a","tooltip");
});
</script>
<!-- /Тултип -->Теперь все ссылки, имеющие класс .ttp_link при налинии title будут обрабатываться плагином и иметь красивый тултип.
4. Определяем класс для нашей всплывающей подсказки:
В любой CSS-файл пишем:
.tooltip {
z-index:999;
left:-9999px;
background:#fff;
border:1px solid #ccc;
font-size:11px;
color:#323232;
padding:4px 8px;
position:absolute;
}
.tooltip p {
margin: 0px;
padding: 0px;
}5. HTML:
Для примера возьмём данный кусок кода:
<div class="ttp_lnk"><b><big>Пример Всплывающей подсказки на jQuery</big></b> <br />
<a href="#" title="<h1>Это пример универсальной всплывающей подсказки на jQuery</h1> <br /> Это нормальный текст<br /><b>Это жирный текст</b><br /><i>Это наклонный текст</i><br /><s>Это зачёркнутый текст</s><br /><b style='color: red;'>Это жирный текст красного цвета</b><br />Ещё<sub>совсем</sub>немного<sup>текста</sup><br /><br /><img src='http://demo.pafnuty.name/uploads/posts/2009-07/1248121624_150px.png' /><br /><br />Вобщем видно что можно использовать форматирование текста в данном тултипе, так же как и картнинки, но пока есть загвоздка с картинками-ссылками.<br /> Применение данного тултипа ОЧЕНЬ широко, стоит только включить воображение.">Наведите на эту ссылку курсор</a>
</div>В нём представлены популярные html-теги форматирования текста и картинка. Как видно, всё корректно отображается.
Преймущества данного плагина:
- поддержка HTML-тегов.
- лёгкость настройки.
- многократность использования на одной странице.
- малый вес плагина.
Но есть и ложка дёгтя:
Если вы вдруг захотите использовать данный тултип для содержимого новости - поспешу Вас разочаровать, если вдруг в новости встретится уменьшенная копия картинки [thumb], то с 99.9%-ной вероятностью весь ваш шаблон поплывёт, поэтому я буду признателен тому, кто сможет помоч в решении данного косяка. Ну а если картинок в новости нет, то смело можно писать вот так:
<div class="sstory ttp_lnk"><br /><a title="{short-story}">Описание новости</a><br /><br /></div>это например можно применить вместо всплывающей подсказки на css, для вывода новостей в 2 колонки.
Я думаю каждый для себя сам решит как можно применить этот тултип у себя на сайте.
Обновление от 29.06.2010
1. Для устранения бага с возникновением пустого пространства внизу сайта примерно в 20px нужно добавить в класс tooltip отрицательную позицию по вертикали (top:-9999px;). В итоге наш css код будет выглядеть вот так:
.tooltip {
z-index:999;
left:-9999px;
top:-9999px;
background:#fff;
border:1px solid #ccc;
font-size:11px;
color:#323232;
padding:4px 8px;
position:absolute;
}
.tooltip p {
margin: 0px;
padding: 0px;
}2. Для устраниения бага с пустым title ссылки мы немного поправим jquery-код, добавим такую строчку:
if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){В итоге наш скрипт будет выглядеть на 2 строчки длиньше, но и работать будет лучше:
function l_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var tooltip = $("#"+name+i);
if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){
$(this).removeAttr("title").mouseover(function(){
tooltip.css({opacity:0.9, display:"none"}).fadeIn(30);
}).mousemove(function(kmouse){
tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
tooltip.fadeOut(10);
});
}
});
}Демо исправлено.
Комментарии
Добавить комментарий
Комментировать могут только зарегистрированные пользователи