Tooltip positioning in ACBC-BYO

Question

Dear Lance,

I've adapted your solution above for my study and it works fine. Only in the BYO screen of my ACBC, the tooltip gets higher and higher the more I come to the bottom of the grid. For the last two attributes they are invisible, because they go to high to the top.

Do you have an idea why this is only the case for the BYO screen?

PS. I'm using v7.0.30

Answer 1

Without seeing your specific study and the specific CSS it uses it's hard for me to try to give you a specific reason why that would happen. My best guess without seeing it is that perhaps you've uncovered a bug in the script or the script has been altered introducing a new bug or that there is some other style rule defined on one of the parent elements of the tooltip that is affecting  where the tooltip element thinks it is on the page. For example, if the tooltip is in a div like this...

<div class="parent">
    <tooltip element>
</div>

and the parent element has a css rule that defines it's position as relative like this...

.parent
{
    position: relative;
}

then it could be that the tooltip element is inheriting the 'position: relative" trait from it's parent so when the JavaScript asks for the position of the tooltip element on the page it will give and x, y coordinate offset relative to the parent and not to the top of the page.  When the pop up is displayed the JavaScript expects to receive the position of the tooltip element relative to the window and not relative to a parent element because it sets the position of the tooltip popup relative to the window. So a tooltip could have an offset of (25, 50) from its parent but have an offsett of (550, 1055) from the window. If the JavaScript gets (25, 50) thinking that it's getting the position relative to the window and then uses that to set the position of the pop at say (40, 60) after doing its calculations, you can hopefully see how that would cause it do display on the wrong part of the page. Chances are there would be another element with 'position: absolute' somewhere up the chain of elements as well.

These kinds of things can be tricky to find. But I lean towards a problem with the JavaScript if it get's continually higher the further down on the page you go.

What I would do is look at that page using Chrome's developer tools (other browsers offer similar tools) to see and play with the CSS of specific elements on the page to see if that fixes the problem. You can also use the developer tools to debug the JavaScript or at least see any errors that might exist. Check out this site for more info on using the developer tools in Chrome https://developers.google.com/web/tools/chrome-devtools/?hl=en

Comments

This is the tooltip function currently being used in version 9  of Lighthouse Studio...

function SSI_SetupToolTips()
{
    var strLinkName = "";
    var strTipTextName = "";

    jQuery(".tool_tip_link").each(function()
    {
        jQuery(this).mousemove(function(event)
        {
            jQuery(this).addClass("tool_tip_link_mouseover");

            var TipTextObj = jQuery(this).next(".tool_tip_text");

            TipTextObj.show();

            var x = event.pageX;
            var y = event.pageY;            

            var intPageWidth = jQuery("body").width();
            var intPageHeight = jQuery(window).height();
            var scrollTop  = jQuery(window).scrollTop();

            var intXpos = x + 18;
            var intYpos = y + 18;

            var intXmax = intPageWidth - TipTextObj.width();
            var intXmin =  0;
            var intYmax = (intPageHeight + scrollTop) - TipTextObj.height();
            var intYmin = scrollTop;

            var adjustedXpos = x - parseInt(TipTextObj.width()) - 18;
            var adjustedYpos = y - TipTextObj.height() - 18;

            if (adjustedXpos < intXmin)
            {
                adjustedXpos = intXmin;
            }
            else if(adjustedXpos > intXmax)
            {
                adjustedXpos = intXmax;
            }

            if (adjustedYpos < intYmin)
            {
                adjustedYpos = intYmin;
            }
            else if(adjustedYpos > intYmax)
            {
                adjustedYpos = intYmax;
            }


            var leftOverflow = adjustedXpos * -1;
            var rightOverflow = x + parseInt(TipTextObj.width()) - intPageWidth;
            var bottomOverflow = y + parseInt(TipTextObj.height()) - intPageHeight;
            var topOverflow = (adjustedYpos - scrollTop) * -1;
            
            //If we are going out of bounds on the right edge then move the tip text to the left.
            if (rightOverflow > 0 && rightOverflow > leftOverflow)
            {
                intXpos = adjustedXpos;
            }

            //if we are going out of bounds on the bottom edge then move the tip to the top
            if (bottomOverflow > 0 && bottomOverflow > topOverflow)
            {
                intYpos = adjustedYpos;
            }

            TipTextObj.css({'left': intXpos, 'top': intYpos});
        });

        jQuery(this).mouseout(function(event)
        {
            jQuery(this).removeClass("tool_tip_link_mouseover");

            var TipTextObj = jQuery(this).next(".tool_tip_text");

            TipTextObj.hide();
        });
    });
}