Предпочтительная подсказка jQuery?

Ответ 1

Мы использовали qTip в одном из наших проектов, поскольку он соответствует всем нашим требованиям, хорошо развит и поддерживаемый, поставляется с превосходной документацией и уже красивыми шаблонами, а также дает нам высокую степень абстракции и настройки.

Ответ 2

Я бы очень рекомендовал http://craigsworks.com/projects/qtip2/ vs qtip v1. qtip v1 больше не поддерживается, а qtip2 имеет некоторые новые функции.

Ответ 3

очень маленький и быстрый множество причудливых материалов

Ответ 4

Я использовал фактическую подсказку jQuery. Вот демонстрация того, что он может сделать. Он прост в использовании, и вы можете настроить внешний вид.

Ответ 5

Я настроил подсказку Роберта Баумгартнера script совсем немного, чтобы он не выходил из экрана. Я просто добавлю его на мою главную страницу, и он будет автоматически выполнен, когда страница будет готова.

window.viewport =
{
    height: function() {
        return $(window).height();
    },

    width: function() {
        return $(window).width();
    },

    scrollTop: function() {
        return $(window).scrollTop();
    },

    scrollLeft: function() {
        return $(window).scrollLeft();
    }
};


jQuery.tooltip = function() {
    tooltipClass = ".tooltip"; // replace with your class, for multiple classes, separate with comma.

    function str_replace(search, replace, subject) {
        return subject.split(search).join(replace);
    }

    xOffset = 10;
    yOffset = 20;
    fadeInTime = 300;

    function positionToolTip(e) {
        var offsetFromTop = e.pageY - viewport.scrollTop();
        var offsetFromLeft = e.pageX - viewport.scrollLeft();
        var tooltipObj = $('#tooltip');
        var pxToBottom = viewport.height() - (e.pageY - viewport.scrollTop());
        var cssTop = 0;
        var cssLeft = (e.pageX + yOffset);
        var topMargin = parseFloat(tooltipObj.css('marginTop'));
        if (isNaN(topMargin)) {
            topMargin = 0;
        }
        var topPadding = parseFloat(tooltipObj.css('paddingTop'));
        if (isNaN(topPadding)) {
            topPadding = 0;
        }
        var topBorder = parseFloat(tooltipObj.css('border-top-width'));
        if (isNaN(topBorder)) {
            topBorder = 0;
        }
        var topOffset = topMargin + topPadding + topBorder;

        if (tooltipObj.height() > viewport.height()) {
            cssTop = viewport.scrollTop() - topOffset + topPadding;
        }
        else if (tooltipObj.height() > pxToBottom) {
            cssTop = viewport.scrollTop() + (viewport.height() - tooltipObj.height()) - topOffset - topPadding - topBorder;
        }
        else {
            cssTop = e.pageY - xOffset;
        }

        tooltipObj.css({ top: cssTop, left: cssLeft }).fadeIn(fadeInTime);
    }

    jQuery("[title]").hover(function(e) {
        if (this.t === undefined || this.t.length == 0) {
            this.t = this.title;
            this.title = "";
            this.t = str_replace("::", "<br />", this.t);
            this.t = str_replace("[!]", "<span class='tooltipTitle'>", this.t);
            this.t = str_replace("[/!]", "</span><br />", this.t);
            this.t = str_replace("[", "<", this.t);
            this.t = str_replace("]", ">", this.t);
        }
        if (this.t != "") {
            jQuery("body").append("<p id='tooltip'>" + this.t + "</p>");
            positionToolTip(e, this);
        }
    }, function() {
        jQuery("#tooltip").remove();
    });
    jQuery("[title]").mousemove(function(e) {
        positionToolTip(e);
    });
    jQuery("[title]").bind('remove', function() {
        jQuery("#tooltip").remove();
    });
    jQuery("[title]").bind('disabled', function() {
        jQuery("#tooltip").remove();
    });
}

jQuery(document).ready(function() {
    jQuery.tooltip();
});

Ответ 6

Я использовал wayfarerweb.com/wtooltip.php на своем последнем веб-сайте. Прост в использовании, но иногда IE отображает NULL вместо текста.

Ответ 7

Я написал чрезвычайно простой плагин для всплывающих подсказок. Вы можете найти его @http://plugins.jquery.com/project/hovertiphtml Он поддерживает полную html-разметку внутри всплывающей подсказки /hovertip (что большинство плагинов для всплывающих подсказок нет) и пользовательский css.