Всплывающая подсказка (tooltip) с помощью jQuery

jQuery TooltipДовольно частая потребность, сегодня нашел очень простое решение.

Библиотека jQuery должна быть подключена. Далее добавляем вот такой скрипт:

$(function(){
    $(".tooltip").hover(function(){
        if(!this.title) return;
        this.tip = this.title;
        $(this).append(
            '<div>'
           +this.tip
           +'</div>'
        );
        this.title = '';
        $('tooltip-wrapper').fadeIn(1500);
    },
    function(){
        $('.tooltip-wrapper').fadeOut(1500);
        $(this).children().remove();
        this.title = this.tip;
    });
});

В CSS добавляем пару селекторов:

.tooltip {
    position: relative;
    }

    .tooltip .tooltip-wrapper {
        color: #a4c4fb;
        text-align: left;
        white-space: normal;
        text-decoration: none;
        border: 1px solid #29498e;

        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px; 

        background: #18254b;

        box-shadow: 0px 5px 10px #182242; 

        padding: 15px;
        position: absolute;
        top: 17px;
        left: 20px;
        width: 250px;
        }

Должно работать...

Естественно, стилями можно изменять внешний вид всплывашки под свои нужды.

Поделитесь с друзьями:



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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>