TOOLTIP НА JQUERY И CSS

+ -
0
TOOLTIP НА JQUERY И CSS


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

Разметка HTML
HTML из демки, но суть в том, что имеем ссылку у которой в атрибуте title="" будет содержаться текст нашей всплывающей подсказки.
     <p>
         <a href="#" title="Это простая подсказка с классом под названием 'tooltip'">Это ссылка</a>
         <br/>
         <a href="#" title="Ещё одна подсказка с class='tooltip'">Ещё ссылка</a>
     </p>


В последствии с помощью javascript будем извлекать текст из 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;
}


javascript
Предварительно подключаем 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");
});


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

Комментариев 0