Adjusting the tip based on screen adjustment

[huzaifa.tapal]

I love this plugin but I feel its missing just one small thing that would seriously make it ideal. The clueTip plugin has this feature and that is to adjust the tip when the tooltip is adjust for screen.

For instance, the tooltip is positioned higher than the target due to it overflowing the viewport, the tip than should adjust lower so its aligned with the target still.

I tried using the beforePositionUpdate and beforeShow to identify this and then change the position of the tooltip corner to maybe render above the target with the "topMiddle" and "bottomMiddle" but that didn't work since once the position is set there doesn't seem to be a way to change this.

Is there a way to do this as a part of the plugin?

[Craig]

huzaifa.tapal, not entirely sure I understand the problem. Have you tried the screen adjustment settings? This sounds like the functionality you require.

[htapal]

I'm using the screen adjustment already and the tooltip does adjust higher when the target is right at the bottom of the viewport or adjust down if the target hugging the top of the viewport but what doesn't adjust is the actual tip.

For instance, if I've set the tip positioning to "leftMiddle" then if the target is at the bottom of the viewport causing the tooltip to adjust higher than the target, the tooltip is still at "leftMiddle" and so its now pointing at thin air.

I'll post an image soon.

[htapal]

htapal Wrote:I'm using the screen adjustment already and the tooltip does adjust higher when the target is right at the bottom of the viewport or adjust down if the target hugging the top of the viewport but what doesn't adjust is the actual tip.

For instance, if I've set the tip positioning to "leftMiddle" then if the target is at the bottom of the viewport causing the tooltip to adjust higher than the target, the tooltip is still at "leftMiddle" and so its now pointing at thin air.

I'll post an image soon.

The qTip positioning is set to:

JS Code

position: {
    corner: {
        target: 'rightMiddle',
        tooltip: 'leftMiddle'
    },
    adjust: {
        screen: true
    }
},

Notice in the image below how the tooltip adjusted down so it doesn't flow off the top of the viewport but the tooltip did not adjust to point to the target and is pointing to thin air.

I'd like for there to be an ability to specify tooltip corners smartly in this case.

[htapal]

After going through the source I found that there was an adjustment being done to the tip when the screenAdjust method was being called but only if the tooltip corner was one of "topLeft", "topRight", "bottomLeft", or "bottomRight".

The code in the screenAdjust is as follows:

JS Code

// Change tip corner if positioning has changed and tips are enabled
      if(self.options.style.tip.corner !== false)
      {
         // Determine new corner properties
         adjustedPosition.corner = new String(tooltip.corner);
         if(newCorner.x !== false) adjustedPosition.corner = adjustedPosition.corner.replace(/Left|Right/, newCorner.x);
         if (newCorner.y !== false) adjustedPosition.corner = adjustedPosition.corner.replace(/top|bottom|middle/, newCorner.y);
 
         // Adjust tip if position has changed and tips are enabled
         if (adjustedPosition.corner !== self.elements.tip.attr('rel')) {
            createTip.call(self, adjustedPosition.corner);
         }
      };

Given this, if the original position I had posted was changed to

JS Code

position: {
    corner: {
        target: 'topRight',
        tooltip: 'bottomLeft'
    },
    adjust: {
        screen: true
    }
},

then the tip was adjusting so that when the tooltip was overflowing to the top then the tooltip would move below the target and the tooltip would be positioned to "topLeft"

Given this, I made a small change to also adjust when the tooltip corner is set to "leftTop", "leftMiddle", "leftBottom", "rightTop", "rightMiddle", "rightBottom" by making this small change to the source above

JS Code

// Change tip corner if positioning has changed and tips are enabled
      if(self.options.style.tip.corner !== false)
      {
         // Determine new corner properties
         adjustedPosition.corner = new String(tooltip.corner);
         if(newCorner.x !== false) adjustedPosition.corner = adjustedPosition.corner.replace(/Left|Right/, newCorner.x);
         if (newCorner.y !== false) {
            if (adjustedPosition.corner.search(/top|bottom|middle/) != -1)
                adjustedPosition.corner = adjustedPosition.corner.replace(/top|bottom|middle/, newCorner.y);
            else if (adjustedPosition.corner.search(/Top|Bottom|Middle/) != -1)
                adjustedPosition.corner = adjustedPosition.corner.replace(/Top|Bottom|Middle/, newCorner.y.substr(0, 1).toUpperCase() + newCorner.y.substring(1));
         }
 
         // Adjust tip if position has changed and tips are enabled
         if (adjustedPosition.corner !== self.elements.tip.attr('rel')) {
            createTip.call(self, adjustedPosition.corner);
         }
      };

this change caused the tooltip to display as follows as compared to the previously posted image



Craig, do you see any problems with this change?

[nomax]

I had the exact same problem. Tips that are "left/right biased" (my name for it) (eg leftBottom) don't reposition during a screen adjust, whereas "top/bottom biased" (eg bottomLeft) work fine. @htapal I think your approach is in the right direction but was incomplete for my needs. Here's what works for me:

JAVASCRIPT Code

if(self.options.style.tip.corner !== false)
      {
         // Determine new corner properties
         adjustedPosition.corner = new String(tooltip.corner);
         //BEGIN PATCH 
         if(newCorner.x !== false) {
            if(adjustedPosition.corner.search(/left|right|middle/) != -1) {
                newCorner.x = newCorner.x.toLowerCase();
            } else if(adjustedPosition.corner.search(/Left|Right|Middle/) != -1) {
                newCorner.x = newCorner.x.substr(0,1).toUpperCase() + newCorner.x.substr(1).toLowerCase();
            }
            adjustedPosition.corner = adjustedPosition.corner.replace(/left|right|middle/i, newCorner.x);
         }  
         if(newCorner.y !== false) {
            if(adjustedPosition.corner.search(/top|bottom|middle/) != -1) {
                newCorner.y = newCorner.y.toLowerCase();
            } else if(adjustedPosition.corner.search(/Top|Bottom|Middle/) != -1) {
                newCorner.y = newCorner.y.substr(0,1).toUpperCase() + newCorner.y.substr(1).toLowerCase();
            }
            adjustedPosition.corner = adjustedPosition.corner.replace(/top|bottom|middle/i, newCorner.y);
         }
         //END PATCH
 
         // Adjust tip if position has changed and tips are enabled
         if(adjustedPosition.corner !== self.elements.tip.attr('rel'))
            createTip.call(self, adjustedPosition.corner);
      };

[alancia]

first thanks craig for such amazing plugin!

nomax - your solution works great! i set the tooltip to "leftMiddle" as well and your solution adjust well for the different elements on different parts of the screen.

the only catch is that i have some elements on the right and the tooltip automatically moves to the left (which is awesome). But the arrow doesn't follow accordingly (stays as "leftTop", "leftMiddle" or "leftBottom". So I changed the following lines and it fixes the arrow problem. just wanted to share in case anyone needs this solution.

JS Code

// Tooltip overflows off the left side of the screen
      if(adjust.left)
      {
         if(self.options.position.target !== 'mouse')
            adjustedPosition.left = target.position.left + target.dimensions.width;
         else
            adjustedPosition.left = self.cache.mouse.x
 
         //newCorner.x = 'Left'; (OLD)
         newCorner.x = 'left'; //(NEW)
      }
 
      // Tooltip overflows off the right side of the screen
      else if(adjust.right)
      {
         if(self.options.position.target !== 'mouse')
            adjustedPosition.left = target.position.left - tooltip.dimensions.width;
         else
            adjustedPosition.left = self.cache.mouse.x - tooltip.dimensions.width;
 
         //newCorner.x = 'Right'; (OLD)
         newCorner.x = 'right'; //(NEW)
      };