problems with captions (or tooltips) in fullscreen mode - (Issue and fix)

[srikanthpagadala]

Issue & Fix

Issue:

I don't know if you ever noticed that "captions" (or tooltips), sometimes randomly stop appearing. In my case, this was more observed when I trigger "fullscreen" of my xtk_container div using HTML5 fullscreen APIs.

More Info about HTML5 fullscreen apis here: https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode http://html5-demos.appspot.com/static/fullscreen.html

Fix:

In X/ui/caption.js, line number 194

Before:

// ..render this.attach(this._parent);

After:

// ..render //this.attach(this._parent); goog.dom.appendChild(this._parent, this.getElement());

Basically, instead of calling "attach" method, simply "append" the caption element to the parent element. This solves the all the caption related problems.

[haehn]

I looked at the code of the attach function (which is from the google closure library)

/**
 * Attach to element. Tooltip will be displayed when the cursor is over the
 * element or when the element has been active for a few milliseconds.
 *
 * @param {Element|string} el Element to display tooltip for, either element
 *                            reference or string id.
 */
goog.ui.Tooltip.prototype.attach = function(el) {
  el = goog.dom.getElement(el);

  this.elements_.add(el);
  goog.events.listen(el, goog.events.EventType.MOUSEOVER,
                     this.handleMouseOver, false, this);
  goog.events.listen(el, goog.events.EventType.MOUSEOUT,
                     this.handleMouseOutAndBlur, false, this);
  goog.events.listen(el, goog.events.EventType.MOUSEMOVE,
                     this.handleMouseMove, false, this);
  goog.events.listen(el, goog.events.EventType.FOCUS,
                     this.handleFocus, false, this);
  goog.events.listen(el, goog.events.EventType.BLUR,
                     this.handleMouseOutAndBlur, false, this);
};

What about all the events? Does the caption still hide correctly when using the appendChild thing on mousemove?

[srikanthpagadala]

yes, caption hides and pops up as expected. No issues in my application.

having said that i'm now interested in looking into "append" function to see how events are still firing in my fix...

On Mon, Sep 3, 2012 at 7:08 PM, Daniel Haehn notifications@github.comwrote:

I looked at the code of the attach function (which is from the google closure library)

/**

• Attach to element. Tooltip will be displayed when the cursor is over the
• element or when the element has been active for a few milliseconds. *
• @param {Element|string} el Element to display tooltip for, either element

•                      reference or string id.

  */ goog.ui.Tooltip.prototype.attach = function(el) { el = goog.dom.getElement(el);

  this.elements_.add(el); goog.events.listen(el, goog.events.EventType.MOUSEOVER, this.handleMouseOver, false, this); goog.events.listen(el, goog.events.EventType.MOUSEOUT, this.handleMouseOutAndBlur, false, this); goog.events.listen(el, goog.events.EventType.MOUSEMOVE, this.handleMouseMove, false, this); goog.events.listen(el, goog.events.EventType.FOCUS, this.handleFocus, false, this); goog.events.listen(el, goog.events.EventType.BLUR, this.handleMouseOutAndBlur, false, this); };

What about all the events? Does the caption still hide correctly when using the appendChild thing on mousemove?

? Reply to this email directly or view it on GitHubhttps://github.com/xtk/X/issues/95#issuecomment-8250672.