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

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

在这里 - 以中心为中心，一切正常，代码更干净......

http://jsfiddle.net/PBpWj/

尽管如果提示文本太宽，它可能会超出屏幕。