[Solved] Offset the arrow/tip

[drc37]

I am trying to offset the arrow or tip of the tooltip. I want to offset the whole tooltip x = .20. Then I want to move the tip and move it out of the corner 20px. (see attachment)

I hope this is self explanatory

[Craig]

drc37, use the .ui-tooltip-tip class to apply an offset

CSS Code

.ui-tooltip-tip{
   margin-left: 20px /* Or maybe use padding */
}

[kiddailey]

A couple of caveats, if you don't mind, Craig (since I've spent some time recently playing with this):

• You'll probably need to use !important on the margin-left style for ui-tooltip-tip. There's an element style applied of -10px that you otherwise won't be able to override.
• Set style.type.corner = true vs. a position like "top center"
• You may need to use position.adjust.x to shift the tooltip itself to where you want it.
• If you want to use a "centered" style tip rather than a slanted corner one, set position.at to be a centered position before you adjust the positioning of the tip and qTip. ie. "bottom center" or "top center"

This is just another awesome example of how flexible qTip really is

[Craig]

kiddaily, spurred on by your question I've introduced a new offset option to the tips plugin! Check it out:

JS Code

$('.selector').qtip({
   content: 'Blah',
   style: {
      classes: 'ui-tooltip-dark',
      tip: {
         corner: true,
         offset: 10
      }
   }
});

It adjusts the tooltip positioning for automatically and even adjusts properly with screen positioning! Let me know what you think

[drc37]

Is there a way to specify what type of tip (corner or center). I would like to use the "top left" and then use the offset with the center tip.

I hope this is self explanatory.

I can make it work with what has already been given above. But it would just be simpler the other way.

Thanks for your prompt help and updates,

David

(4th November 15:11)Craig Wrote:  kiddaily, spurred on by your question I've introduced a new offset option to the tips plugin! Check it out:

JS Code

$('.selector').qtip({
   content: 'Blah',
   style: {
      classes: 'ui-tooltip-dark',
      tip: {
         corner: true,
         offset: 10
      }
   }
});

It adjusts the tooltip positioning for automatically and even adjusts properly with screen positioning! Let me know what you think

[kiddailey]

(4th November 15:15)drc37 Wrote:  Is there a way to specify what type of tip (corner or center). I would like to use the "top left" and then use the offset with the center tip.

In theory, all you'd need to do is specify the style.tip.corner setting to be "top center" and then use the new offset value to shift it with a negative value.

---

(4th November 15:11)Craig Wrote:  kiddaily, spurred on by your question I've introduced a new offset option to the tips plugin! Check it out: ...

It adjusts the tooltip positioning for automatically and even adjusts properly with screen positioning! Let me know what you think

That's a perfect addition!

The only catch is that it doesn't seem to work with when you use the "center" positions of the tips, which is what drc37 is looking for (and what the old way you mentioned, with my additional notes, does).

For example, both of these yield the correct look, but the position of the qTip cannot be adjusted so that the tip is pointing correctly:

JS Code

$('.selector').qtip({
	content: 'Blah',
	style: {
		classes: 'ui-tooltip-dark',
		tip: {
			corner: "top center",
			offset: -10
		}
	}
});

If we instead try to shift the qTip itself, the position.adjust.x doesn't seem to work properly anymore when the tip offset is included:

JS Code

$('.selector').qtip({
	content: 'Blah',
	style: {
		classes: 'ui-tooltip-dark',
		tip: {
			corner: true,
			offset: -10
		}
	},
	position: {
		my: "top center",
		at: "bottom center",
		adjust: {
			x: -20
		}
	}
});

[drc37]

Thanks for all the help. Here is my final code (see image):

JS Code

var setupAccountTooltips = function(){
    // $.fn.qtip.defaults.position.adjust.x = -17;
    $(".manage_account .more_info.right").qtip({
      position: {
        my: 'top center', 
        at: 'bottom right'
     },
     style: { 
       tip: true,
       classes: 'ui-tooltip-dark right',
       tip: {
         corner: true,
         offset: -115
       }
     }  
    });
    $(".manage_account .more_info.left").qtip({
      position: {
        my: 'top center', 
        at: 'bottom right'
     },
     style: { 
       tip: true,
       classes: 'ui-tooltip-dark left',
       tip: {
         corner: true,
         offset: 115
       }
     }  
    });
  };

AND

JS Code

.ui-tooltip-dark.right{
  margin-left: -17px;
}
.ui-tooltip-dark.left{
  margin-left: -17px;
}

[kiddailey]

Ah - I see you used the CSS to work around the bug in the position shifting. Forgot about doing that

[Craig]

Don't forget about the mimic option guys! It allows you to specify what type of tip to draw independant of the corner!

JS Code

$('.selector').qtip({
   content: 'Fancy tips!',
   style: {
      tip: {
         corner: 'top left',
         mimic: 'top center'
      }
   }
});

This will draw the top center tip at the top left corner. Brilliant! You can even specify only a single x or y type so it will adjust properly with the screen adjustment:

JS Code

mimic: 'top'
mimic: 'center'

Have a play and let me know if you find any bugs!

[drc37]

Thanks, for the help.