Question

我写了这个插件，但我在尝试定位工具提示时遇到问题，因此它完全位于父容器的中心位置。我目前只是计算它所在的父容器的宽度，并通过获取它的left位置找出它的位置，但它总是不完全居中。

有什么想法吗？

(function($) {
    var toolTip = {
        init: function() {
            this.each(function() {
                var $that = $(this);
                // our boolean object to check if it already exists on the page
                var $toolSpan = $('<div class="tooltip"><span class="tooltip_arrow"></span></div>');

                var preloadImages = function() {
                    var tempImage = new Image();
                    tempImage.src = 'http://i.imgur.com/K5ynr.png';
                    tempImage = null;
                };
                preloadImages();
                $that.mouseover(function() {
                    var $altText = $that.attr('alt');
                    var $parentWidth = $that.parent().width();
                    var $parentPos = $that.parent().position();
                    var $parentPosY = $parentPos.top;
                    var $parentPosX = $parentPos.left;

                        $that.parent().after($toolSpan);
                        $toolSpan.prepend($altText);
                        $that.parent().next($toolSpan).css('top', $parentPosY - 30).css('left', $parentPosX).fadeIn();

                        var $toolSpanWidth = $that.parent().outerWidth();
                        $that.parent().next('.tooltip').children('.tooltip_arrow').css('left', $toolSpanWidth / 2).fadeIn();
                }).mouseout(function() {
                    $that.parent().next($toolSpan).text('').hide().remove();
                });
            });
        } /* end init */
    };
    $.fn.toolTip = toolTip.init;
})(jQuery);

http://jsfiddle.net/QH8dy/2/

Answer 1

如果您的意图是使工具提示容器在链接容器上方居中对齐（在本例中为wrapper s）。尝试修改以下代码行：

$that.parent().next($toolSpan)
    .css('top', $parentPosY - 30)
    .css('left', $parentPosX + ($parentWidth/2) - ($toolSpan.width()/2))
    .fadeIn();

请参阅以下jsFiddle。

Answer 2

在这里，你去 - 集中，所有工作，代码更清洁......

http://jsfiddle.net/PBpWj/

虽然如果提示文字太宽，它可能会脱离屏幕。

始终将我的jQuery工具提示放在父容器的中心

2 个答案: