Всегда располагать мою подсказку jQuery в центре родительского контейнера - PullRequest
Новая
       27

Всегда располагать мою подсказку jQuery в центре родительского контейнера

0 голосов
/ 21 марта 2012

Я написал этот плагин, но у меня возникают проблемы при попытке разместить подсказку так, чтобы она была полностью центрирована над родительским контейнером. В настоящее время я просто вычисляю ширину родительского контейнера, в котором он находится, и выясняю, где он находится, получая его позицию 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/

Ответы [ 2 ]

1 голос
/ 21 марта 2012

здесь - по центру, все работает, код немного чище ...

http://jsfiddle.net/PBpWj/

, хотя потенциально может выйти за пределы экрана, если текст подсказки слишком широкий.

1 голос
/ 21 марта 2012

Если вы хотите, чтобы контейнер всплывающей подсказки был выровнен по центру над контейнерами ссылок (в данном случае wrapper s). Попробуйте изменить следующую строку кода: 

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

См. Ниже jsFiddle .

...