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

очень маленький и быстрый много интересного

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

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

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

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

Я написал чрезвычайно простой плагин всплывающей подсказки. Вы можете найти его @ http: //plugins.jquery.