This project is archived and is in readonly mode.

#287 ✓invalid
Michael McWilliam

Tips vanish off side of screen on resize

Reported by Michael McWilliam | March 17th, 2010 @ 05:41 PM | in 1.3.0.1 rc1

MooTools.Core: 1.2.4
MooTools.More: 1.2.4.4
Browser: tested on FF 3.6 and IE 8

Repo steps

  1. Create a new Tips with (with the option of fixed:true) a larger HTML block as the text (using store( 'tip:text') to add HTML to element). The initial tip I noticed this issue on had a unordered list with a couple of points.
  2. Position the tip element about 30% from the right of the page.
  3. Maximize the browser, and hover over the tip (the tip should fit to the right of the tip element).
  4. Hide the tip, and make the browser window small enough that the tip will have to be shown to the left of the tip element next time you hover.
  5. Hover over the tip again.
  6. Move mouse off the tip.
  7. Hover over tip again.
  8. Move mouse off the tip.
  9. Move the mouse over the tip again.

Expected

  1. Tip appears to right of tip element.
  2. Tip appears to left of tip element.
  3. Tip appears to left of tip element.
  4. Tip appears to left of tip element.

Actual

  1. Tip appears to right of tip element with proper offset to cursor (as expected).
  2. Tip is not visible, or the bottom left corner can be seen at the top right of the screen.
  3. Tip has partially moved to where it should be.
  4. Tip is properly positioned to left of tip element.

Possibly solution

Update the hide function to clear the left and top styles (that are still used when checking the new offsetWidth and offsetHeight of the tip-wrap element.

Current code:

show: function(element){
  if (!this.tip) document.id(this);
  this.fireEvent('show', [this.tip, element]);
}

Working code:

show: function(element){
  if (!this.tip) document.id(this);
  this.tip.setStyles({left: 0, top: 0});
  this.fireEvent('show', [this.tip, element]);
}

Comments and changes to this ticket

Create your profile

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

The MooTools Extensions

Tags

Pages