» » Простой tooltip с поддержкой html-тегов на jQuery

Простой tooltip с поддержкой html-тегов на jQuery

3.02
10
36 666
Давно я уже ничего не писал на сайте, но вот решил поделиться с народом, недавно обнаруженным, интереснейшим плагином на jQuery.

В данной статье я не буду рассказывать как устроен данный плагин, это уже сделано на сайте Webmasters.by (сайт к сожалению сдох).
Я лишь хочу показать часть из областей применения этого на удивление легковесного (по сравнению с встречавшимися мне ранее), но функционального плагина.
Показывать я буду, естественно, на движке 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);
        });
        }
    });
}


Демо исправлено.

Похожие материалы

Комментарии

ПафНутиЙ
ПафНутиЙ 29 июня 2010 22:04
Обновил скрипт, исправлено 2 бага.
tykak
tykak 17 августа 2010 20:27
Подключаю скрипт , а тултип всё тот же стандартыный (dle 9.0)
ПафНутиЙ
ПафНутиЙ 17 августа 2010 21:19
В 9.0 свои скрипты, свой фреймворк. т.е. подключать jquery к 9.0 не нужно вообще.
akaynt90
akaynt90 2 октября 2011 15:58
Привет, а можешь сделать в этом скрипте, чтобы когда подсказка уходит сильно в право она просто переворачивалась на другую сторону, чтобы не сжималась, а просто переворачивалась? За рание спасибо.
akaynt90
akaynt90 2 октября 2011 16:11
Вот как выгдялит у меня на сайте http://www.kinomanie.com/ хотелось бы чтобы было так как я описал выше, если это возможно.
AndreyKAZ
AndreyKAZ 8 сентября 2016 07:41
Привет! Спасибо за хак!
А как можно автоматически генерировать такой тултип при наведении на ссылку внутри новости на другую новость (перелинковка), с {image-1), title, shortstory линкованной статьи?
Создавать какой-то файл .tpl и его подтягивать при выводе тултипа? Но какс делать, чтобы он анализировал ссылку в тексте...
Заранее спасибо за ответ!
ПафНутиЙ
ПафНутиЙ 8 сентября 2016 08:17
просто добавьте к контенту класс .ttp_link и скрипт, сли найдёт title у ссылок - сделает им тултип.
AndreyKAZ
AndreyKAZ 8 сентября 2016 11:14
У меня на ссылках текстовые title, так вот тултип их в виде текста и выводит. А как, чтобы вместо этого текста он в тултип "подсасывал" shortstory ссылки с имеющейся там картинкой, текстом и т.п.?

В полной новости это невозможно сделать, не правя движка, как я понял...
Flerox
Flerox 28 января 2017 04:22
Как мне это привязать к этому
[xfgiven_imdb]<div class="rating ttp_lnk" title="Рейтинг IMDB: [xfvalue_imdb]" class="ttp_lnk">
<div class="starbar imdb ttp_lnk">
<div class="inner ttp_lnk" style="width:[xfvalue_proi]%"></div>
</div>
<div class="value ttp_lnk">[xfvalue_imdb]</div>
</div> [/xfgiven_imdb]
ПафНутиЙ
ПафНутиЙ 28 января 2017 16:13
Действуйте по аналогии.

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.