This project is archived and is in readonly mode.

#426 ✓wontfix
Michael McWilliam

Tips offset incorrect when appearing above or left of mouse

Reported by Michael McWilliam | October 26th, 2010 @ 07:16 PM | in 1.3.1.1

The distance between the closest edge (x and y) are off by 13 pixels when the tip box is displayed to the left and top of the mouse (compared to when positioned to the right and below the mouse). The distance difference is quite noticeable once I start to look.

Browsers: FF 3.6.11 and IE 8, may include others too but haven't tested yet.
MooTools: core 1.3, more 1.3.0.1rc1

Repro Steps

This issue was found using Watir for automated functionality testing for browser compatibility checks.

See example at, resize browser window so the tip can be displayed both to the left and the right of the mouse:
http://jsfiddle.net/HM2xD/

Expected

In the below data, leftEdge is true if the left edge is the closest to the cursor and should be used for offset calculation, otherwise it is false and the right edge is used for comparison. Similarly with topEdge.

1: leftEdge: true,  topEdge: true,  xDiff: 16, yDiff: 16
2: leftEdge: false, topEdge: true,  xDiff: 16, yDiff: 16
3: leftEdge: true,  topEdge: false, xDiff: 16, yDiff: 16
4: leftEdge: false, topEdge: false, xDiff: 16, yDiff: 16

Actual

1: leftEdge: true,  topEdge: true,  xDiff: 16, yDiff: 16
2: leftEdge: false, topEdge: true,  xDiff: 29, yDiff: 16
3: leftEdge: true,  topEdge: false, xDiff: 16, yDiff: 29
4: leftEdge: false, topEdge: false, xDiff: 29, yDiff: 29

Sample patch

  if ((obj[props[z]] + tip[z] - scroll[z]) > size[z] - this.options.windowPadding[z]){
-   obj[props[z]] = event.page[z] - this.options.offset[z] - tip[z];
+   obj[props[z]] = event.page[z] - this.options.offset[z] - tip[z] + 13;
    bounds[z+'2'] = true;
  }

Why 13px I do not know. :-)

Comments and changes to this ticket

  • Arian

    Arian October 27th, 2010 @ 01:03 AM

    • Milestone set to 1.3.1.1
    • Assigned user set to “Christoph Pojer”
    • Milestone order changed from “197538” to “0”
  • Tim Wienk

    Tim Wienk October 27th, 2010 @ 05:35 PM

    I don't see any problems, am I missing something?

    http://jsfiddle.net/HM2xD/4/

    I created a block following the mouse, the tooltips should appear at the corners when moving around the red circle (or square in IE).

  • Michael McWilliam

    Michael McWilliam October 28th, 2010 @ 04:57 PM

    Okay, sorry for the buggy bug report :-). There is an issue in my reported sample code, and an incorrect assumption when writing my tests, and an incorrect calculation in the sample output provided.

    The issue in the sample code: I use 'fixed: true' in my code, but used 'fixed: false' in the bug report because it appeared to have the same issue, though it does not (appeared being the operative word). It appeared to have the same issue because to the bottom and right have the cursor consuming some of the 16px, while when the note is displayed to the top and left none of the 16px are covered by the cursor icon.

    The incorrect assumption: I assumed that the note should always be displayed the same distance from whichever edge of the attachtome element it was displayed by. The tip is actually always displayed 16px from the top left corner of the attachtome element.

    The incorrect calculation: The 16 or 29 pixels in the sample output was calculated from the furthest edge of the attachtome element instead of the closest (not sure how I didn't notice that :-) ). So really, given my intended calculation, anywhere 16px appears should actually be 3px, and anywhere 29px is displayed should actually be 16px. You see, the size of my attachtome element is 13px x 13px.

    The end result: With how the fixed tips box is being used in my application, I do still want it to be displayed 3-5px from the closest edge of my help icon. The help content does vary greatly in length, so the size is dynamic based on the content. With 'fixed: true', which removes a lot of the flickerig on mouse movement, the tip is always displayed 16px from the top left corner.

    I propose changing this in MooTools to be 16px (existing config option: offset) away from the nearest edge of the attachtome element when in fixed mode. It seems more correct is all the use cases I can think of, though understand if there are use cases this doesn't work in - I can't think of any right now. See attached diff.

    Thanks, and sorry again about the initial bug report, though the issue I was trying to report still existing, it materialized very differently than expected.

  • Michael McWilliam

    Michael McWilliam October 28th, 2010 @ 05:00 PM

    Sorry, noticed some white space differences in the last diff attached. Vim is set to match our company style.

  • Michael McWilliam

    Michael McWilliam October 28th, 2010 @ 05:01 PM

    http://jsfiddle.net/HM2xD/9/ demonstrates the top left corner as it currently stands with 'fixed: true'.

  • Tim Wienk

    Tim Wienk November 9th, 2010 @ 12:22 AM

    • Tag changed from tips to offset, tips

    I'm not convinced.

    Consider this case:
    http://jsfiddle.net/timwienk/HM2xD/13/

    You want the tip to still work, and not disappear to the bottom right.

    I think the current implementation is more flexible, allowing you to still set the offset option to element.getWidth() + 16, but not hurting these cases and not hurting compatibility.

    I'm not sure how clear it is in the docs right now, maybe we should clarify there that fixed: true fixes it relative to the left top of the element, and offer the solution I mentioned above if you want it somewhere else?

  • Tim Wienk

    Tim Wienk November 11th, 2010 @ 11:06 PM

    • State changed from “new” to “wontfix”

    Marking this as wontfix for now, will open it again if we get some new insights.

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

Attachments

Tags

Pages