本机浏览器工具提示显示在 IE 中的 jQuery Tipsy 工具提示上

发布于 2024-11-04 21:24:10 字数 4451 浏览 5 评论 0原文

我希望有人能提供帮助。

我已经实现了 jQuery Tipsy 插件,它在除 IE 之外的所有浏览器中都能正常工作。目前,在 IE 中首次加载页面时,会显示醉酒工具提示和本机浏览器工具提示。如果您随后刷新页面,则只会显示醉酒的页面。

我尝试下载演示页面使用的脚本(因为问题似乎没有发生在那里) - 但是我的工具提示却出现在屏幕之外。

有其他人遇到过这个问题吗?如果有,你是如何解决的?或者,如果有人知道如何删除本机工具提示,我们将不胜感激。

JS如下...(从http://onehackoranother.com/projects/jquery/tipsy/下载)

(function($) {

$.fn.tipsy = function(options) {

    options = $.extend({}, $.fn.tipsy.defaults, options);

    return this.each(function() {

        var opts = $.fn.tipsy.elementOptions(this, options);

        $(this).hover(function() {

            $.data(this, 'cancel.tipsy', true);

            var tip = $.data(this, 'active.tipsy');
            if (!tip) {
                tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>');
                tip.css({position: 'absolute', zIndex: 100000});
                $.data(this, 'active.tipsy', tip);
            }

            if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') {
                $(this).attr('original-title', $(this).attr('title') || '').removeAttr('title');
            }

            var title;
            if (typeof opts.title == 'string') {
                title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title);
            } else if (typeof opts.title == 'function') {
                title = opts.title.call(this);
            }

            tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);

            var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
            tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
            tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
            var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
            var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity;

            switch (gravity.charAt(0)) {
                case 'n':
                    tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
                    break;
                case 's':
                    tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
                    break;
                case 'e':
                    tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
                    break;
                case 'w':
                    tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
                    break;
            }

            if (opts.fade) {
                tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8});
            } else {
                tip.css({visibility: 'visible'});
            }

        }, function() {
            $.data(this, 'cancel.tipsy', false);
            var self = this;
            setTimeout(function() {
                if ($.data(this, 'cancel.tipsy')) return;
                var tip = $.data(self, 'active.tipsy');
                if (opts.fade) {
                    tip.stop().fadeOut(function() { $(this).remove(); });
                } else {
                    tip.remove();
                }
            }, 100);

        });

    });

};

// Overwrite this method to provide options on a per-element basis.
// For example, you could store the gravity in a 'tipsy-gravity' attribute:
// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
// (remember - do not modify 'options' in place!)
$.fn.tipsy.elementOptions = function(ele, options) {
    return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
};

$.fn.tipsy.defaults = {
    fade: false,
    fallback: '',
    gravity: 'n',
    html: false,
    title: 'title'
};

$.fn.tipsy.autoNS = function() {
    return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
};

$.fn.tipsy.autoWE = function() {
    return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
};

})(jQuery);

提前致谢。

I'm hoping someone can help.

I've implemented the jQuery Tipsy plugin and it works fine in all browsers apart from IE. Currently, on first load of the page in IE, both the tipsy tooltips AND the native browser tooltips are displaying. If you then refresh the page, only the tipsy ones will show.

I've tried downloading the script that the demo page uses instead (as the problem doesn't seem to happen there) - however my tooltips then appear off the screen instead.

Has anyone else experienced this problem and if so, how did you solve it? Or if anyone knows how to remove the native tooltips it would be greatly appreciated.

The JS is below...(downloaded from http://onehackoranother.com/projects/jquery/tipsy/)

(function($) {

$.fn.tipsy = function(options) {

    options = $.extend({}, $.fn.tipsy.defaults, options);

    return this.each(function() {

        var opts = $.fn.tipsy.elementOptions(this, options);

        $(this).hover(function() {

            $.data(this, 'cancel.tipsy', true);

            var tip = $.data(this, 'active.tipsy');
            if (!tip) {
                tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>');
                tip.css({position: 'absolute', zIndex: 100000});
                $.data(this, 'active.tipsy', tip);
            }

            if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') {
                $(this).attr('original-title', $(this).attr('title') || '').removeAttr('title');
            }

            var title;
            if (typeof opts.title == 'string') {
                title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title);
            } else if (typeof opts.title == 'function') {
                title = opts.title.call(this);
            }

            tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);

            var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
            tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
            tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
            var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
            var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity;

            switch (gravity.charAt(0)) {
                case 'n':
                    tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
                    break;
                case 's':
                    tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
                    break;
                case 'e':
                    tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
                    break;
                case 'w':
                    tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
                    break;
            }

            if (opts.fade) {
                tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8});
            } else {
                tip.css({visibility: 'visible'});
            }

        }, function() {
            $.data(this, 'cancel.tipsy', false);
            var self = this;
            setTimeout(function() {
                if ($.data(this, 'cancel.tipsy')) return;
                var tip = $.data(self, 'active.tipsy');
                if (opts.fade) {
                    tip.stop().fadeOut(function() { $(this).remove(); });
                } else {
                    tip.remove();
                }
            }, 100);

        });

    });

};

// Overwrite this method to provide options on a per-element basis.
// For example, you could store the gravity in a 'tipsy-gravity' attribute:
// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
// (remember - do not modify 'options' in place!)
$.fn.tipsy.elementOptions = function(ele, options) {
    return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
};

$.fn.tipsy.defaults = {
    fade: false,
    fallback: '',
    gravity: 'n',
    html: false,
    title: 'title'
};

$.fn.tipsy.autoNS = function() {
    return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
};

$.fn.tipsy.autoWE = function() {
    return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
};

})(jQuery);

Thanks in advance.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

紫罗兰の梦幻 2024-11-11 21:24:10

看看这个:

https://github.com/jaz303/tipsy/issues/22

似乎为我工作。

Check this out:

https://github.com/jaz303/tipsy/issues/22

Seems to be working for me.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文