Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Tooltip for mobile view

Hi all,

I am facing a problem with tooltip in the mobile view.  In the normal/desktop view it is working as it should. However, in the mobile version the tooltip text is shown out of the visible window (only 1/4 of the right site can be seen). How can I fix that? Here is my tooltip "config":

.tool_tip_text
{
    width: 655px;
    height: auto;
    border: 1px solid #44679c;
    background-color: #FFFFFF;
    padding: 10px;
    vertical-align: middle;
    font-weight: normal;
}
asked Nov 23, 2015 by Mike

1 Answer

0 votes
 
Best answer
Because you've set the width the 655px you'll probably have some kind of problem on a mobile screen no matter what. You'll probably be OK with tablets but phones will probably give you problems when you've defined your width to be that big.

One thing you can try is overloading the JavaScript function that controls the appearance of the tooltip. I'd go into the settings window of SSI Web, click the headers and footers tab and then in the HTML <head> Tag section add some JavaScript like the following...

<script type="text/javascript">
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 - TipTextObj.height();
            var intYmin = scrollTop;

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

            if (adjustedXpos < intXmin){
                adjustXpos = intXmin;
            }
            else if(adjustedXpos > intXmax){
                adjustXpos = 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 > leftOverflow)
            {
                intXpos = adjustedXpos;
            }

            //if we are going out of bounds on the bottom edge then move the tip to the top
            if (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();
        });
    });
}
</script>

This will make it so the tooltip appears on whichever side causes the least amount of overflow off the screen. You'll want to test it to be sure it works with your study but its a good place to start if nothing else.

EDIT: I made a few changes to the script since the original post to fix a couple issues I found as well as to improve the position of the tool tip in cases where it may go out of the top of the screen if placed above the pointer but also would go off the bottom of the screen if placed below the pointer.
answered Nov 24, 2015 by Lance Adamson Bronze Sawtooth Software, Inc. (1,675 points)
selected Dec 4, 2015 by Lance Adamson
Thank you! By this time, I tested some other solutions. The best one for my study was to define tooltip additionally in the mobile section of the ssi css. Works pretty good!
Tooltip positioning in ACBC-BYO
...