首选jQuery工具提示？

Question

那里有很多jquery工具提示插件。

我应该使用哪个？以及为什么？

Answer 1

我们在我们的一个项目中使用了qTip，因为它符合我们的所有要求，经过精心开发和维护，带有出色的文档和已经漂亮的模板，并且还为我们提供了高度抽象和定制。

Answer 2

我强烈推荐http://craigsworks.com/projects/qtip2/与qtip v1。 qtip v1不再维护，并且qtip2具有一些出色的新功能。

Answer 3

very small and fastlots of fancy stuff

Answer 4

我已经自定义了Robert Baumgartner's tooltip脚本很多，因此它不会在屏幕上弹出项目。我只是将其添加到我的母版页，当该页准备就绪时，它将自动执行。

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();
});

Answer 5

我已经使用了实际的jQuery tooltip。 Here's它可以做什么的演示。它易于使用，您可以配置外观。

Answer 6

我在最新的网站中使用了wayfarerweb.com/wtooltip.php。易于使用，但是somethimes IE会显示NULL而不是文本。

Answer 7

我写了一个非常简单的工具提示插件。您可以在[http://plugins.jquery.com/project/hovertiphtml]中找到它。它在tooltip / hovertip（大多数tooltip插件不支持）和自定义CSS中支持完整的html标记。

Answer 8

我更喜欢按照我喜欢的颜色进行学习。不需要jquery插件。

http://www.ilovecolors.com.ar/rollovers-and-tooltips-with-jquery