romo 0.19.10 → 0.20.0

data/assets/js/romo/tooltip.js

@@ -1,343 +1,268 @@
-$.fn.romoTooltip = function() {
-  return $.map(this, function(element) {
-    return new RomoTooltip(element);
-  });
-}
+var RomoTooltip = RomoComponent(function(elem) {
+  this.elem = elem;
 
-var RomoTooltip = function(element) {
-  this.elem = $(element);
-  this.doInitPopup();
+  this.doInit();
+  this._bindElem();
 
-  this.hoverState = 'out';
-  this.delayEnter = 0;
-  this.delayLeave = 0;
-  if (this.elem.data('romo-tooltip-delay') !== undefined && this.elem.data('romo-tooltip-delay') !== '') {
-    this.delayEnter = this.elem.data('romo-tooltip-delay');
-    this.delayLeave = this.elem.data('romo-tooltip-delay');
-  }
-  if (this.elem.data('romo-tooltip-delay-enter') !== undefined && this.elem.data('romo-tooltip-delay-enter') !== '') {
-    this.delayEnter = this.elem.data('romo-tooltip-delay-enter');
-  }
-  if (this.elem.data('romo-tooltip-delay-leave') !== undefined && this.elem.data('romo-tooltip-delay-leave') !== '') {
-    this.delayLeave = this.elem.data('romo-tooltip-delay-leave');
-  }
+  Romo.trigger(this.elem, 'romoTooltip:ready', [this]);
+});
 
-  if (this.elem.data('romo-tooltip-style-class') !== undefined) {
-    this.bodyElem.addClass(this.elem.data('romo-tooltip-style-class'));
-  }
+RomoTooltip.prototype.popupOpen = function() {
+  return Romo.hasClass(this.popupElem, 'romo-tooltip-open') === true;
+}
 
-  this.elem.on('mouseenter', $.proxy(this.onToggleEnter, this));
-  this.elem.on('mouseleave', $.proxy(this.onToggleLeave, this));
-  this.elem.on('tooltip:triggerPopupOpen', $.proxy(this.onPopupOpen, this));
-  this.elem.on('tooltip:triggerPopupClose', $.proxy(this.onPopupClose, this));
-  this.elem.on('tooltip:triggerSetContent', $.proxy(this.onSetContent, this));
-  $(window).on('resize', $.proxy(this.onResizeWindow, this))
+RomoTooltip.prototype.popupClosed = function() {
+  return Romo.hasClass(this.popupElem, 'romo-tooltip-open') === false;
+}
 
-  this.doInit();
-  this.doInitBody();
-  if (this.elem.data('romo-tooltip-content') === undefined) {
-    this.doBindAjax();
+RomoTooltip.prototype.doPopupOpen = function() {
+  var scrollParentElems = Romo.scrollableParents(this.elem).concat([window]);
+  Romo.on(scrollParentElems, 'scroll', Romo.proxy(this._onScrollableParentsScroll, this));
+
+  if (this.romoAjax !== undefined) {
+    this.romoAjax.doInvoke();
+  } else {
+    this._setBodyHtml(Romo.data(this.elem, 'romo-tooltip-content'));
   }
+  Romo.addClass(this.popupElem, 'romo-tooltip-open');
+  this.doPlacePopupElem();
 
-  this.elem.trigger('tooltip:ready', [this]);
-}
+  var bodyElem = Romo.f('body')[0];
+  Romo.on(bodyElem, 'romoModal:mousemove',       Romo.proxy(this._onModalPopupChange, this));
+  Romo.on(bodyElem, 'romoPopupStack:popupClose', Romo.proxy(this._onModalPopupChange, this));
+  Romo.on(window, 'resize', Romo.proxy(this._onResizeWindow, this));
 
-RomoTooltip.prototype.doInit = function() {
-  // override as needed
+  Romo.trigger(this.elem, 'romoTooltip:popupOpen', [this]);
 }
 
-RomoTooltip.prototype.doInitPopup = function() {
-  this.popupElem = $('<div class="romo-tooltip-popup"><div class="romo-tooltip-arrow"></div><div class="romo-tooltip-body"></div></div>');
-  this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-tooltip-append-to-closest') || 'body'));
+RomoTooltip.prototype.doPopupClose = function() {
+  Romo.removeClass(this.popupElem, 'romo-tooltip-open');
 
-  this.bodyElem = this.popupElem.find('> .romo-tooltip-body');
+  var scrollParentElems = Romo.scrollableParents(this.elem).concat([window]);
+  Romo.off(scrollParentElems, 'scroll', Romo.proxy(this._onScrollableParentsScroll, this));
 
-  this.popupPosition = this.elem.data('romo-tooltip-position') || 'top';
-  this.popupElem.attr('data-romo-tooltip-position', this.popupPosition);
+  var bodyElem = Romo.f('body')[0];
+  Romo.off(bodyElem, 'romoModal:mousemove',       Romo.proxy(this._onModalPopupChange, this));
+  Romo.off(bodyElem, 'romoPopupStack:popupClose', Romo.proxy(this._onModalPopupChange, this));
+  Romo.off(window, 'resize', Romo.proxy(this._onResizeWindow, this));
 
-  this.popupAlignment = this.elem.data('romo-tooltip-alignment') || 'center';
-  this.popupElem.attr('data-romo-tooltip-alignment', this.popupAlignment);
+  Romo.trigger(this.elem, 'romoTooltip:popupClose', [this]);
+}
 
-  this.doSetPopupZIndex(this.elem);
+RomoTooltip.prototype.doPlacePopupElem = function() {
+  var configHeight = Romo.data(this.elem, 'romo-tooltip-height') ||
+                     Romo.data(this.elem, 'romo-tooltip-max-height');
+  var configPosition = this.popupPosition;
 
-  // don't propagate click events on the popup elem.  this prevents the popup
-  // from closing when clicked (see body click event bind on popup open)
-  this.popupElem.on('click', function(e) {
-    if (e !== undefined) {
-      e.stopPropagation();
+  if (configHeight === 'detect' && (configPosition === 'top' || configPosition === 'bottom')) {
+    var popupHeight       = this.popupElem.offsetHeight;
+    var topAvailHeight    = this._getPopupMaxAvailableHeight('top');
+    var bottomAvailHeight = this._getPopupMaxAvailableHeight('bottom');
+
+    if (popupHeight < topAvailHeight && popupHeight < bottomAvailHeight) {
+      // if it fits both ways, use the config position way
+      configHeight = this._getPopupMaxAvailableHeight(configPosition);
+    } else if (topAvailHeight > bottomAvailHeight) {
+      configPosition = 'top';
+      configHeight   = topAvailHeight;
+    } else {
+      configPosition = 'bottom';
+      configHeight   = bottomAvailHeight;
     }
-  })
 
-  // the popup should be treated like a child elem.  add it to Romo's
-  // parent-child elems so it will be removed when the elem is removed.
-  // delay adding it b/c other components may `append` generated tooltips
-  // meaning the tooltip is removed and then re-added.  if added immediately
-  // the "remove" part will incorrectly remove the popup.
-  setTimeout($.proxy(function() {
-    Romo.parentChildElems.add(this.elem, [this.popupElem]);
-  }, this), 1);
-}
+    Romo.setStyle(this.bodyElem, 'max-height', configHeight.toString() + 'px');
+  }
 
-RomoTooltip.prototype.doInitBody = function() {
-  this.doResetBody();
+  var elemRect   = this.elem.getBoundingClientRect();
+  var elemOffset = Romo.offset(this.elem);
 
-  this.bodyElem.css({
-    'min-width':  this.elem.data('romo-tooltip-min-width'),
-    'max-width':  this.elem.data('romo-tooltip-max-width'),
-    'width':      this.elem.data('romo-tooltip-width'),
-    'min-height': this.elem.data('romo-tooltip-min-height'),
-    'height':     this.elem.data('romo-tooltip-height')
-  });
+  var elemHeight = elemRect.height;
+  var elemWidth  = elemRect.width;
+  var elemTop    = elemOffset.top;
+  var elemLeft   = elemOffset.left
 
-  if (this.elem.data('romo-tooltip-max-height') === undefined) {
-    this.elem.attr('data-romo-tooltip-max-height', 'detect');
-  }
-  if (this.elem.data('romo-tooltip-max-height') !== 'detect') {
-    this.bodyElem.css({
-      'max-height': this.elem.data('romo-tooltip-max-height')
-    });
-  }
-}
+  var popupOffsetHeight = this.popupElem.offsetHeight;
+  var popupOffsetWidth  = this.popupElem.offsetWidth;
 
-RomoTooltip.prototype.doResetBody = function() {
-  this.bodyElem.css({
-    'min-width':  '',
-    'max-width':  '',
-    'width':      '',
-    'min-height': '',
-    'max-height': '',
-    'height':     '',
-  });
-}
+  var pad = 6 + 1; // arrow size + spacing
 
-RomoTooltip.prototype.doBindAjax = function() {
-  this.romoAjax = this.elem.romoAjax()[0];
-  this.romoAjax.doUnbindElem(); // disable auto invoke on click
+  Romo.setData(this.popupElem, 'romo-tooltip-arrow-position', configPosition);
 
-  this.elem.on('romoAjax:callStart', $.proxy(function(e, romoAjax) {
-    this.doLoadBodyStart();
-    return false;
-  }, this));
-  this.elem.on('romoAjax:callSuccess', $.proxy(function(e, data, romoAjax) {
-    this.doLoadBodySuccess(data);
-    return false;
-  }, this));
-  this.elem.on('romoAjax:callError', $.proxy(function(e, xhr, romoAjax) {
-    this.doLoadBodyError(xhr);
-    return false;
-  }, this));
-}
+  var posTop  = undefined;
+  var posLeft = undefined;
+  switch (configPosition) {
+    case 'top':
+      posTop  = elemTop - popupOffsetHeight - pad;
+      posLeft = elemLeft + (elemWidth / 2) - (popupOffsetWidth / 2);
+      break;
+    case 'bottom':
+      posTop  = elemTop + elemHeight + pad;
+      posLeft = elemLeft + (elemWidth / 2) - (popupOffsetWidth / 2);
+      break;
+    case 'left':
+      posTop  = elemTop + (elemHeight / 2) - (popupOffsetHeight / 2);
+      posLeft = elemLeft - popupOffsetWidth - pad;
+      break;
+    case 'right':
+      posTop  = elemTop + (elemHeight / 2) - (popupOffsetHeight / 2);
+      posLeft = elemLeft + elemWidth + pad;
+      break;
+  }
 
-RomoTooltip.prototype.doLoadBodyStart = function() {
-  this._setBodyHtml('');
-  this.doInitBody();
-  this.doPlacePopupElem();
-  this.elem.trigger('tooltip:loadBodyStart', [this]);
+  Romo.setStyle(this.popupElem, 'top',  posTop + 'px');
+  Romo.setStyle(this.popupElem, 'left', posLeft + 'px');
 }
 
-RomoTooltip.prototype.doLoadBodySuccess = function(data) {
-  Romo.initHtml(this.bodyElem, data);
-  this.doInitBody();
+RomoTooltip.prototype.doSetContent = function(value) {
+  Romo.setData(this.elem, 'romo-tooltip-content', value);
+  this._setBodyHtml(Romo.data(this.elem, 'romo-tooltip-content'));
   this.doPlacePopupElem();
-  this.elem.trigger('tooltip:loadBodySuccess', [data, this]);
+  Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
 }
 
-RomoTooltip.prototype.doLoadBodyError = function(xhr) {
-  this.elem.trigger('tooltip:loadBodyError', [xhr, this]);
+RomoTooltip.prototype.doSetPopupZIndex = function(relativeElem) {
+  var relativeZIndex = Romo.parseZIndex(relativeElem);
+  Romo.setStyle(this.popupElem, 'z-index', relativeZIndex + 1100); // see z-index.css
 }
 
-RomoTooltip.prototype.onToggleEnter = function(e) {
-  if (e !== undefined) {
-    e.preventDefault();
-  }
-
-  this.hoverState = 'in';
-  if (this.elem.hasClass('disabled') === false) {
-    clearTimeout(this.timeout);
-    this.timeout = setTimeout($.proxy(function() {
-      if (this.hoverState ==='in') {
-        this.doPopupOpen();
-      }
-    }, this), this.delayEnter);
-  }
-}
+// private
 
-RomoTooltip.prototype.onToggleLeave = function(e) {
-  if (e !== undefined) {
-    e.preventDefault();
+RomoTooltip.prototype._bindElem = function() {
+  this._bindPopup();
+  if (Romo.data(this.elem, 'romo-tooltip-content') === undefined) {
+    this._bindAjax();
   }
+  this._bindBody();
 
   this.hoverState = 'out';
-  if (this.elem.hasClass('disabled') === false) {
-    clearTimeout(this.timeout);
-    this.timeout = setTimeout($.proxy(function() {
-      if (this.hoverState === 'out') {
-        this.doPopupClose();
-      }
-    }, this), this.delayLeave);
-  }
-}
-
-RomoTooltip.prototype.onResizeWindow = function(e) {
-  if (this.elem.hasClass('disabled') === false && this.hoverState === 'in') {
-    this.doPlacePopupElem();
-  }
-}
+  this.delayEnter = 0;
+  this.delayLeave = 0;
 
-RomoTooltip.prototype.onPopupOpen = function(e) {
-  if (e !== undefined) {
-    e.preventDefault();
+  if (Romo.data(this.elem, 'romo-tooltip-delay') !== undefined && Romo.data(this.elem, 'romo-tooltip-delay') !== '') {
+    this.delayEnter = Romo.data(this.elem, 'romo-tooltip-delay');
+    this.delayLeave = Romo.data(this.elem, 'romo-tooltip-delay');
   }
-
-  if (this.elem.hasClass('disabled') === false) {
-    this.doPopupOpen();
+  if (Romo.data(this.elem, 'romo-tooltip-delay-enter') !== undefined && Romo.data(this.elem, 'romo-tooltip-delay-enter') !== '') {
+    this.delayEnter = Romo.data(this.elem, 'romo-tooltip-delay-enter');
   }
-}
-
-RomoTooltip.prototype.doPopupOpen = function() {
-  if (this.romoAjax !== undefined) {
-    this.romoAjax.doInvoke();
-  } else {
-    this._setBodyHtml(this.elem.data('romo-tooltip-content'));
+  if (Romo.data(this.elem, 'romo-tooltip-delay-leave') !== undefined && Romo.data(this.elem, 'romo-tooltip-delay-leave') !== '') {
+    this.delayLeave = Romo.data(this.elem, 'romo-tooltip-delay-leave');
   }
-  this.popupElem.addClass('romo-tooltip-open');
-  this.doPlacePopupElem();
 
-  if (this.elem.parents('.romo-modal-popup').size() !== 0) {
-    $('body').on('modal:mousemove',  $.proxy(this.onModalPopupChange, this));
-    $('body').on('modal:popupclose', $.proxy(this.onModalPopupChange, this));
-  }
-  $(window).on('resize', $.proxy(this.onResizeWindow, this));
+  Romo.on(this.elem, 'mouseenter',                    Romo.proxy(this._onToggleEnter, this));
+  Romo.on(this.elem, 'mouseleave',                    Romo.proxy(this._onToggleLeave, this));
+  Romo.on(this.elem, 'romoTooltip:triggerPopupOpen',  Romo.proxy(this._onPopupOpen,   this));
+  Romo.on(this.elem, 'romoTooltip:triggerPopupClose', Romo.proxy(this._onPopupClose,  this));
+  Romo.on(this.elem, 'romoTooltip:triggerSetContent', Romo.proxy(this._onSetContent,  this));
 
-  this.elem.trigger('tooltip:popupOpen', [this]);
+  Romo.on(window, 'resize', Romo.proxy(this._onResizeWindow, this))
 }
 
-RomoTooltip.prototype.onPopupClose = function(e) {
-  if (e !== undefined) {
-    e.preventDefault();
-  }
+RomoTooltip.prototype._bindPopup = function() {
+  this.popupElem = Romo.elems('<div class="romo-tooltip-popup"><div class="romo-tooltip-arrow"></div><div class="romo-tooltip-body"></div></div>')[0];
+  var popupParentElem = Romo.closest(this.elem, Romo.data(this.elem, 'romo-tooltip-append-to-closest') || 'body');
+  Romo.append(popupParentElem, this.popupElem);
 
-  if (this.elem.hasClass('disabled') === false) {
-    this.doPopupClose();
+  this.bodyElem = Romo.children(this.popupElem).find(Romo.proxy(function(childElem){
+    return Romo.is(childElem, '.romo-tooltip-body');
+  }, this));
+  if (Romo.data(this.elem, 'romo-tooltip-style-class') !== undefined) {
+    Romo.addClass(this.bodyElem, Romo.data(this.elem, 'romo-tooltip-style-class'));
   }
-}
 
-RomoTooltip.prototype.doPopupClose = function() {
-  this.popupElem.removeClass('romo-tooltip-open');
+  this.popupPosition = Romo.data(this.elem, 'romo-tooltip-position') || 'top';
+  Romo.setData(this.popupElem, 'romo-tooltip-position', this.popupPosition);
 
-  if (this.elem.parents('.romo-modal-popup').size() !== 0) {
-    $('body').off('modal:mousemove',  $.proxy(this.onModalPopupChange, this));
-    $('body').off('modal:popupclose', $.proxy(this.onModalPopupChange, this));
-  }
-  $(window).off('resize', $.proxy(this.onResizeWindow, this));
+  this.popupAlignment = Romo.data(this.elem, 'romo-tooltip-alignment') || 'center';
+  Romo.setData(this.popupElem, 'romo-tooltip-alignment', this.popupAlignment);
 
-  this.elem.trigger('tooltip:popupClose', [this]);
-}
+  this.doSetPopupZIndex(this.elem);
 
-RomoTooltip.prototype.onModalPopupChange = function(e) {
-  if (e !== undefined) {
-    this.doPopupClose();
-  }
-  return true;
-}
+  // don't propagate click events on the popup elem.  this prevents the popup
+  // from closing when clicked (see body click event bind on popup open)
+  Romo.on(this.popupElem, 'click', function(e) {
+    e.stopPropagation();
+  })
 
-RomoTooltip.prototype.onSetContent = function(e, value) {
-  if (e !== undefined) {
-    e.preventDefault();
-  }
-  this.doSetContent(value);
+  Romo.parentChildElems.add(this.elem, [this.popupElem]);
 }
 
-RomoTooltip.prototype.doSetContent = function(value) {
-  this.elem.data('romo-tooltip-content', value);
-  this._setBodyHtml(this.elem.data('romo-tooltip-content'));
-  this.doPlacePopupElem();
-}
+RomoTooltip.prototype._bindAjax = function() {
+  this.romoAjax = new RomoAjax(this.elem);
+  this.romoAjax.doUnbindElem(); // disable auto invoke on click
 
-RomoTooltip.prototype.onResizeWindow = function(e) {
-  this.doPlacePopupElem();
-  return true;
+  Romo.on(this.elem, 'romoAjax:callStart', Romo.proxy(function(e, romoAjax) {
+    this._loadBodyStart();
+    return false;
+  }, this));
+  Romo.on(this.elem, 'romoAjax:callSuccess', Romo.proxy(function(e, data, romoAjax) {
+    this._loadBodySuccess(data);
+    return false;
+  }, this));
+  Romo.on(this.elem, 'romoAjax:callError', Romo.proxy(function(e, xhr, romoAjax) {
+    this._loadBodyError(xhr);
+    return false;
+  }, this));
 }
 
-RomoTooltip.prototype.doPlacePopupElem = function() {
-  if (this.elem.parents('.romo-modal-popup').size() !== 0) {
-    this.popupElem.css({'position': 'fixed'});
-  }
-
-  var pos = $.extend({}, this.elem[0].getBoundingClientRect(), this.elem.offset());
-  var w = this.popupElem[0].offsetWidth;
-  var h = this.popupElem[0].offsetHeight;
-  var pad = 6 + 1; // arrow size + spacing
-  var offset = {};
-
-  var configHeight = this.elem.data('romo-tooltip-height') || this.elem.data('romo-tooltip-max-height');
-  var configPosition = this.popupPosition;
-
-  if (configHeight === 'detect' && (configPosition === 'top' || configPosition === 'bottom')) {
-    var popupHeight = this.popupElem.height();
-    var topAvailHeight = this._getPopupMaxAvailableHeight('top');
-    var bottomAvailHeight = this._getPopupMaxAvailableHeight('bottom');
+RomoTooltip.prototype._bindBody = function() {
+  this._resetBody();
 
-    if (popupHeight < topAvailHeight && popupHeight < bottomAvailHeight) {
-      // if it fits both ways, use the config position way
-      configHeight = this._getPopupMaxAvailableHeight(configPosition);
-      this.popupElem.attr('data-romo-tooltip-arrow-position', configPosition);
-    } else if (topAvailHeight > bottomAvailHeight) {
-      configPosition = 'top';
-      configHeight = topAvailHeight;
-      this.popupElem.attr('data-romo-tooltip-arrow-position', 'top');
-    } else {
-      configPosition = 'bottom';
-      configHeight = bottomAvailHeight;
-      this.popupElem.attr('data-romo-tooltip-arrow-position', 'bottom');
-    }
+  Romo.setStyle(this.bodyElem, 'min-width',  Romo.data(this.elem, 'romo-tooltip-min-width'));
+  Romo.setStyle(this.bodyElem, 'max-width',  Romo.data(this.elem, 'romo-tooltip-max-width'));
+  Romo.setStyle(this.bodyElem, 'width',      Romo.data(this.elem, 'romo-tooltip-width'));
+  Romo.setStyle(this.bodyElem, 'min-height', Romo.data(this.elem, 'romo-tooltip-min-height'));
+  Romo.setStyle(this.bodyElem, 'height',     Romo.data(this.elem, 'romo-tooltip-height'));
 
-    this.bodyElem.css({'max-height': configHeight.toString() + 'px'});
-  } else {
-    this.popupElem.attr('data-romo-tooltip-arrow-position', configPosition);
+  if (Romo.data(this.elem, 'romo-tooltip-max-height') === undefined) {
+    Romo.setData(this.elem, 'romo-tooltip-max-height', 'detect');
   }
-
-
-  if(h > configHeight) {
-    h = configHeight;
+  if (Romo.data(this.elem, 'romo-tooltip-max-height') !== 'detect') {
+    Romo.setStyle(this.bodyElem, 'max-height', Romo.data(this.elem, 'romo-tooltip-max-height'));
   }
+}
 
-  switch (configPosition) {
-    case 'top':
-      $.extend(offset, { top: pos.top - h - pad, left: pos.left + pos.width / 2 - w / 2 });
-      break;
-    case 'bottom':
-      $.extend(offset, { top: pos.top + pos.height + pad, left: pos.left + pos.width / 2 - w / 2 });
-      break;
-    case 'left':
-      $.extend(offset, { top: pos.top + pos.height / 2 - h / 2, left: pos.left - w - pad });
-      break;
-    case 'right':
-      $.extend(offset, { top: pos.top + pos.height / 2 - h / 2, left: pos.left + pos.width + pad });
-      break;
-  }
+RomoTooltip.prototype._resetBody = function() {
+  Romo.rmStyle(this.bodyElem, 'min-width');
+  Romo.rmStyle(this.bodyElem, 'max-width');
+  Romo.rmStyle(this.bodyElem, 'width');
+  Romo.rmStyle(this.bodyElem, 'min-height');
+  Romo.rmStyle(this.bodyElem, 'max-height');
+  Romo.rmStyle(this.bodyElem, 'height');
+}
 
-  this.popupElem.offset(offset);
+RomoTooltip.prototype._loadBodyStart = function() {
+  this._setBodyHtml('');
+  this._bindBody();
+  this.doPlacePopupElem();
+  Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
+  Romo.trigger(this.elem, 'romoTooltip:loadBodyStart', [this]);
 }
 
-RomoTooltip.prototype.doSetPopupZIndex = function(relativeElem) {
-  var relativeZIndex = Romo.parseZIndex(relativeElem);
-  this.popupElem.css({'z-index': relativeZIndex + 1100}); // see z-index.css
+RomoTooltip.prototype._loadBodySuccess = function(data) {
+  Romo.initUpdateHtml(this.bodyElem, data);
+  this._bindBody();
+  this.doPlacePopupElem();
+  Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
+  Romo.trigger(this.elem, 'romoTooltip:loadBodySuccess', [data, this]);
 }
 
-// private
+RomoTooltip.prototype._loadBodyError = function(xhr) {
+  Romo.trigger(this.elem, 'romoTooltip:loadBodyError', [xhr, this]);
+}
 
 RomoTooltip.prototype._getPopupMaxAvailableHeight = function(position) {
   var maxHeight = undefined;
 
   switch (position) {
     case 'top':
-      var elemTop = this.elem[0].getBoundingClientRect().top;
+      var elemTop = this.elem.getBoundingClientRect().top;
       maxHeight = elemTop - this._getPopupMaxHeightDetectPad(position);
       break;
     case 'bottom':
-      var elemBottom = this.elem[0].getBoundingClientRect().bottom;
-      maxHeight = $(window).height() - elemBottom - this._getPopupMaxHeightDetectPad(position);
+      var viewportHeight = document.documentElement.clientHeight;
+      var elemBottom     = this.elem.getBoundingClientRect().bottom;
+      maxHeight = viewportHeight - elemBottom - this._getPopupMaxHeightDetectPad(position);
       break;
   }
 
@@ -345,13 +270,74 @@ RomoTooltip.prototype._getPopupMaxAvailableHeight = function(position) {
 }
 
 RomoTooltip.prototype._getPopupMaxHeightDetectPad = function(position) {
-  return this.elem.data('romo-tooltip-max-height-detect-pad-'+position) || this.elem.data('romo-tooltip-max-height-detect-pad') || 10;
+  return (
+    Romo.data(this.elem, 'romo-tooltip-max-height-detect-pad-'+position) ||
+    Romo.data(this.elem, 'romo-tooltip-max-height-detect-pad')           ||
+    10
+  );
 }
 
 RomoTooltip.prototype._setBodyHtml = function(content) {
-  this.bodyElem.html(content || '');
+  Romo.updateHtml(this.bodyElem, '<div>'+content+'</div>');
 }
 
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-tooltip-auto="true"]').romoTooltip();
-});
+// event functions
+
+RomoTooltip.prototype.romoEvFn._onToggleEnter = function(e) {
+  this.hoverState = 'in';
+  if (Romo.hasClass(this.elem, 'disabled') === false) {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(Romo.proxy(function() {
+      if (this.hoverState ==='in') {
+        this.doPopupOpen();
+      }
+    }, this), this.delayEnter);
+  }
+
+  return false;
+}
+
+RomoTooltip.prototype.romoEvFn._onToggleLeave = function(e) {
+  this.hoverState = 'out';
+  if (Romo.hasClass(this.elem, 'disabled') === false) {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(Romo.proxy(function() {
+      if (this.hoverState === 'out') {
+        this.doPopupClose();
+      }
+    }, this), this.delayLeave);
+  }
+
+  return false;
+}
+
+RomoTooltip.prototype.romoEvFn._onPopupOpen = function(e) {
+  if (Romo.hasClass(this.elem, 'disabled') === false) {
+    this.doPopupOpen();
+  }
+}
+
+RomoTooltip.prototype.romoEvFn._onPopupClose = function(e) {
+  this.doPopupClose();
+}
+
+RomoTooltip.prototype.romoEvFn._onModalPopupChange = function(e) {
+  this.doPopupClose();
+}
+
+RomoTooltip.prototype.romoEvFn._onSetContent = function(e, value) {
+  this.doSetContent(value);
+}
+
+RomoTooltip.prototype.romoEvFn._onScrollableParentsScroll = function(e) {
+  this.doPopupClose();
+}
+
+RomoTooltip.prototype.romoEvFn._onResizeWindow = function(e) {
+  this.doPlacePopupElem();
+  return true;
+}
+
+// init
+
+Romo.addElemsInitSelector('[data-romo-tooltip-auto="true"]', RomoTooltip);

data/assets/js/romo/word_boundary_filter.js

@@ -1,19 +1,19 @@
 var RomoWordBoundaryFilter = function(filterString, setElems, getElemTextContentCallback) {
   this.boundaryCharsRegex = /[\s-_]+/;
-  this.matchingNodes      = [];
-  this.notMatchingNodes   = [];
+  this.matchingElems      = [];
+  this.notMatchingElems   = [];
   this.filters            = filterString
                               .trim()
                               .toLowerCase()
                               .split(this.boundaryCharsRegex);
 
-  Romo.toArray(setElems).forEach($.proxy(function(node) {
-    var contentStack = getElemTextContentCallback($(node))
+  Romo.array(setElems).forEach(Romo.proxy(function(elem) {
+    var contentStack = getElemTextContentCallback(elem)
                          .trim()
                          .toLowerCase()
                          .split(this.boundaryCharsRegex).reverse();
 
-    var match = this.filters.reduce($.proxy(function(filterMatch, filter) {
+    var match = this.filters.reduce(Romo.proxy(function(filterMatch, filter) {
       if (filterMatch === false) {
         // short-circuit the reduce
         return false;
@@ -33,12 +33,9 @@ var RomoWordBoundaryFilter = function(filterString, setElems, getElemTextContent
     }, this), true);
 
     if (match === true) {
-      this.matchingNodes.push(node);
+      this.matchingElems.push(elem);
     } else {
-      this.notMatchingNodes.push(node);
+      this.notMatchingElems.push(elem);
     }
   }, this));
-
-  this.matchingElems    = $(this.matchingNodes);
-  this.notMatchingElems = $(this.notMatchingNodes);
 }