4 992 Скрипты / Tooltip

Tooltip на jQuery и CSS

Tooltip на jQuery и CSS

Всплывающие подсказки при наведении использующие библиотеку jQuery и CSS. Тут нет никаких специальных плагинов, просто одна функция и её вызов.

HTML

HTML из демки, но суть в том, что имеем ссылку <a> у которой в атрибуте title="" будет содержаться текст нашей всплывающей подсказки.

     <p>
         <a href="#" title="Это простая подсказка с классом под названием 'tooltip'">Это ссылка</a>
         <br/>
         <a href="#" title="Ещё одна подсказка с class='tooltip'">Ещё ссылка</a>
     </p>

В последствии с помощью jаvascript будем извлекать текст из title и оформлять его в теги html для показа.

CSS

Основные классы оформлены так:

.tooltip{
     position:absolute;
     left:-2000px;
     background:#dedede;
     padding:5px;
     border:1px solid #fff;
     width:250px;
}

.tooltip p{
     margin:0;
     padding:0;
     color:#fff;
     background:#222;
     padding:2px 7px;
}

jаvascript

Предварительно подключаем jQuery и файл вот с таким содержанием:

function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
        var my_tooltip = $("#"+name+i);
        
        $(this).removeAttr("title").mouseover(function(){
                my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
        }).mousemove(function(kmouse){
                my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
        }).mouseout(function(){
                my_tooltip.fadeOut(400);                  
        });
    });
}

$(document).ready(function(){
     simple_tooltip("a","tooltip");
});

Немножко пояснений:

 function simple_tooltip(target_items, name){
} 

$(document).ready(function(){
     simple_tooltip("a","tooltip");
});

В верхнем коде: target_items - переменная, которую мы вызываем в даьнейшем и с которой работает наш скрипт.

Например, чтобы добавить подсказки ко всем ссылкам в блоке с классом .content, необходимо ввести ".content а".

Переменная name определяет css класс, который мы прикручиваем к нашей подсказке.

Дополнение

А вот альтернатива предыдущему скрипту. В этом случае добавлено условие на проверку наличия атрибута title у ссылок:

function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
        var my_tooltip = $("#"+name+i);

        if($(this).attr("title") != ""){ // Проверяем есть ли атрибут title

        $(this).removeAttr("title").mouseover(function(){
                my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
        }).mousemove(function(kmouse){
                my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
        }).mouseout(function(){
                my_tooltip.fadeOut(400);
        });

        }
    });
}

$(document).ready(function(){
     simple_tooltip("a","tooltip");
});

Скачать 893Загрузок 1,19 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи