javascript - 使用 "Collision"接近边距时翻转工具提示

Question

我的工具提示超出了我的页面边界。我正在使用一个名为 aToolTip 的 jquery 插件。这是我的代码:

(function($) {
    $.fn.aToolTip = function(options) {
        /**
            setup default settings
        */
        var defaults = {
            // no need to change/override
            closeTipBtn: 'aToolTipCloseBtn',
            toolTipId: 'aToolTip',
            // ok to override
            fixed: false,
            clickIt: false,
            inSpeed: 200,
            outSpeed: 100,
            tipContent: '',
            toolTipClass: 'defaultTheme',
            xOffset: 5,
            yOffset: 5,
            onShow: null,
            onHide: null,

        },
        // This makes it so the users custom options overrides the default ones
        settings = $.extend({}, defaults, options);

        return this.each(function() {
            var obj = $(this);
            /**
                Decide weather to use a title attr as the tooltip content
            */
            if(obj.attr('title')){
                // set the tooltip content/text to be the obj title attribute
                var tipContent = obj.attr('title');  
            } else {
                // if no title attribute set it to the tipContent option in settings
                var tipContent = settings.tipContent;
            }

            /**
                Build the markup for aToolTip
            */
            var buildaToolTip = function(){
                $('body').append("<div id='"+settings.toolTipId+"' class='"+settings.toolTipClass+"'><p class='aToolTipContent'>"+tipContent+"</p></div>");

                if(tipContent && settings.clickIt){
                    $('#'+settings.toolTipId+' p.aToolTipContent')
                    .append("<a id='"+settings.closeTipBtn+"' href='#' alt='close'>close</a>");
                }
            },
            /**
                Position aToolTip
            */
            positionaToolTip = function(){
                $('#'+settings.toolTipId).css({
                    top: (obj.offset().top - $('#'+settings.toolTipId).outerHeight() - settings.yOffset) + 'px',
                    left: (obj.offset().left + obj.outerWidth() + settings.xOffset) + 'px'
                })
                // added delay() call...
                .stop().delay(1000).fadeIn(settings.inSpeed, function(){
                    if ($.isFunction(settings.onShow)){
                        settings.onShow(obj);
                    }
                });             
            },
            /**
                Remove aToolTip
            */
            removeaToolTip = function(){
                // Fade out
                $('#'+settings.toolTipId).stop().fadeOut(settings.outSpeed, function(){
                    $(this).remove();
                    if($.isFunction(settings.onHide)){
                        settings.onHide(obj);
                    }
                });             
            };

            /**
                Decide what kind of tooltips to display
            */
            // Regular aToolTip
            if(tipContent && !settings.clickIt){    
                // Activate on hover    
                obj.hover(function(){
                    // remove already existing tooltip
                    $('#'+settings.toolTipId).remove();
                    obj.attr({title: ''});
                    buildaToolTip();
                    positionaToolTip();
                }, function(){ 
                    removeaToolTip();
                }); 
            }           

            // Click activated aToolTip
            if(tipContent && settings.clickIt){
                // Activate on click    
                obj.click(function(el){
                    // remove already existing tooltip
                    $('#'+settings.toolTipId).remove();
                    obj.attr({title: ''});
                    buildaToolTip();
                    positionaToolTip();
                    // Click to close tooltip
                    $('#'+settings.closeTipBtn).click(function(){
                        removeaToolTip();
                        return false;
                    });      
                    return false;           
                });
            }

            // Follow mouse if enabled
            if(!settings.fixed && !settings.clickIt){
                obj.mousemove(function(el){
                    $('#'+settings.toolTipId).css({
                        top: (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset),
                        left: (el.pageX + settings.xOffset)
                    });
                });         
            }           

        }); // END: return this
    };
})(jQuery);

当接近右边距时，如何修改我的工具提示以 flipfit flip？现在我它们消失在右边缘和上边缘。我还需要它们在 350px 之后换行。 我尝试将以下内容添加到函数中但没有结果:

max-width: 350px,
collision: "flipfit flip",

我做错了什么？

Answer 1

您的问题就在这里:

positionaToolTip = function(){//this is not toggling between the two.
                $('#'+settings.toolTipId).css({
                    top: (obj.offset().top - $('#'+settings.toolTipId).outerHeight() - settings.yOffset) + 'px',
                    left: (obj.offset().left + obj.outerWidth() + settings.xOffset) + 'px'
                })
                // added delay() call...
                .stop().delay(1000).fadeIn(settings.inSpeed, function(){
                    if ($.isFunction(settings.onShow)){
                        settings.onShow(obj);
                    }
                });             
            },

也许添加这样的东西会起作用:

   var $tooltip = $('#' + settings.toolTipId),
       $win = $(window),
       winLeft = $win.scrollLeft(),
       objWidth = obj.outerWidth(),
       tipWidth = $tooltip.outerWidth(),
       offset = $obj.offset(),
       ttWidth = $tooltip.outerWidth(),
       ttHeight = $tooltip.outerHeight();
   $win.width() < (offset.left - winLeft + objWidth + tipWidth + ttWidth) ?
    $tooltip//reversed (to left)
     .addClass("reversed")
     .css({
      left: offset.left - winLeft - tipWidth - ttWidth,
      top: offset.top - $win.scrollTop() + $obj.outerHeight() / 2 + ttHeight
     })
   :
    $tooltip//standard (to right)
     .css({
      left: offset.left - winLeft + objWidth + ttWidth,
      top: offset.top - $win.scrollTop() + $obj.outerHeight() / 2 + ttHeight
     });