Align jQuery Tipsy To Left Edge Of Element

Question

I'm using the jQuery Tipsy Plugin to create tool tips in my project. Tooltips are automatically centred to the element, as seen on the plugin pages demos, but I'd like it to align to the left of element, does anyone know a method to do this? The plugin automatically sets an absolute position of the tooltip when displayed, I've tried altering this function but have had no luck.

Update 1: I am well aware of the docs and the gravity option, I am looking to centre the tooltips arrow to the left edge of it's corresponding element.

Update 2: Here's a mock up of how I want the tooltip to be placed: Left: Current, Right: Intended

score 2 · Accepted Answer · answered May 30 '12 at 20:44

2

Found the solution, I was editing the wrong function. It turn's out there was another function specially for 'NW/SW' gravities, updated JS:

            if (gravity.length == 2) {
                if (gravity.charAt(1) == 'w') {
                    tp.left = pos.left - 5;
                } else {
                    tp.left = pos.left + pos.width / 2 - actualWidth + 15;
                }
            }

I'm going to fork this on Git incase other's need this functionality.

answered May 30 '12 at 20:44

Ryan Brodie

6,554
8
40
57

+1 Thanks for posting back your solution for others that may have the same question. – lucuma May 30 '12 at 20:55
Thanks for your answer, my apologies for my poor communication initially. – Ryan Brodie May 30 '12 at 20:59

score 1 · Answer 2 · answered May 30 '12 at 18:37

1

You should be able to set the position based on the gravity option:

$('#foo').tipsy({gravity: 'e'});  // these are coordinates: // nw | n | ne | w | e | sw | s | se

The information on the options for the plugin can be found on this page. See the section called gravities for more information or other configuration options.

http://onehackoranother.com/projects/jquery/tipsy/#

answered May 30 '12 at 18:37

lucuma

18,247
4
66
91

Sorry someone posted this exact answer, I commented explaining why it was wrong, and they must of deleted it. Apologies, thank you for answering, I am well aware of the docs, but I went to align the tooltip's tip to the **left edge** of the element, and not to the centre. – Ryan Brodie May 30 '12 at 19:30
@RyanBrodie I'm confused, can you post a screenshot of what you are looking for.. – lucuma May 30 '12 at 19:32

score 1 · Answer 3 · answered Jul 08 '16 at 14:47

Thanks @Ryan for the answer, this is exactly what I was looking for. I went a bit further with your code and gave more functionality.

I added 2 new options to tipsy so that it does the following:

On sw/nw, you can use edgeAlignWest: 'right' or edgeAlignWest: 'center'
On se/ne, you can use edgeAlignEast: 'left' or edgeAlignEast: 'center'

The new code to do this is

// line 61, tipsy version 1.0.0a
if (gravity.length == 2) {
    if (gravity.charAt(1) == 'e') {
        tp.left = (this.options.edgeAlignEast == 'right') ? (pos.left + pos.width - actualWidth + 15) : (pos.left + pos.width / 2 - actualWidth + 15);
    }else if (gravity.charAt(1) == 'w') {
        tp.left = (this.options.edgeAlignWest == 'left') ? (pos.left - 5) : (pos.left + pos.width / 2 - 15);
    } else {
      tp.left = pos.left + pos.width / 2 - actualWidth + 15;
  }
}

//...
// line 191, tipsy version 1.0.0a
$.fn.tipsy.defaults = {
    edgeAlignEast: 'center',  // <-- new option, default to 'center', you can also use 'right'
    edgeAlignWest: 'center',  // <-- new option, default to 'center', you can also use 'left'
    className: null,
    delayIn: 0,
    delayOut: 0,
    fade: false,
    fallback: '',
    gravity: 'n',
    html: false,
    live: false,
    offset: 0,
    opacity: 0.8,
    title: 'title',
    trigger: 'hover'
};

score 0 · Answer 4 · answered May 30 '12 at 20:23

0

Looking into the source (at line 43),

I find this,

case 'n':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};

I guess changing the left should do the trick.

answered May 30 '12 at 20:23

Jashwant

28,410
16
70
105

I think that's what the OP is asking as to what that should be set to. – lucuma May 30 '12 at 20:30
`The plugin automatically sets an absolute position of the tooltip when displayed, I've tried altering this function but have had no luck.` Yes I was looking for that function to be altered? – Ryan Brodie May 30 '12 at 20:34
'How something can set something automatically if you have source code' ? By the way, have you tried setting `left: 0` ? – Jashwant May 30 '12 at 20:48

Align jQuery Tipsy To Left Edge Of Element

4 Answers4