assets/javascripts/materialize/tooltip.js in materialize-sass-1.0.0.alpha4 vs assets/javascripts/materialize/tooltip.js in materialize-sass-1.0.0.beta

@@ -44,10 +44,11 @@
       _this.el.M_Tooltip = _this;
       _this.options = $.extend({}, Tooltip.defaults, options);
 
       _this.isOpen = false;
       _this.isHovered = false;
+      _this.isFocused = false;
       _this._appendTooltipEl();
       _this._setupEventHandlers();
       return _this;
     }
 
@@ -59,11 +60,11 @@
        * Teardown component
        */
       value: function destroy() {
         $(this.tooltipEl).remove();
         this._removeEventHandlers();
-        this.$el[0].M_Tooltip = undefined;
+        this.el.M_Tooltip = undefined;
       }
     }, {
       key: '_appendTooltipEl',
       value: function _appendTooltipEl() {
         var tooltipEl = document.createElement('div');
@@ -82,20 +83,26 @@
         this.tooltipEl.querySelector('.tooltip-content').innerHTML = this.options.html;
       }
     }, {
       key: '_setupEventHandlers',
       value: function _setupEventHandlers() {
-        this.handleMouseEnterBound = this._handleMouseEnter.bind(this);
-        this.handleMouseLeaveBound = this._handleMouseLeave.bind(this);
-        this.$el[0].addEventListener('mouseenter', this.handleMouseEnterBound);
-        this.$el[0].addEventListener('mouseleave', this.handleMouseLeaveBound);
+        this._handleMouseEnterBound = this._handleMouseEnter.bind(this);
+        this._handleMouseLeaveBound = this._handleMouseLeave.bind(this);
+        this._handleFocusBound = this._handleFocus.bind(this);
+        this._handleBlurBound = this._handleBlur.bind(this);
+        this.el.addEventListener('mouseenter', this._handleMouseEnterBound);
+        this.el.addEventListener('mouseleave', this._handleMouseLeaveBound);
+        this.el.addEventListener('focus', this._handleFocusBound, true);
+        this.el.addEventListener('blur', this._handleBlurBound, true);
       }
     }, {
       key: '_removeEventHandlers',
       value: function _removeEventHandlers() {
-        this.$el[0].removeEventListener('mouseenter', this.handleMouseEnterBound);
-        this.$el[0].removeEventListener('mouseleave', this.handleMouseLeaveBound);
+        this.el.removeEventListener('mouseenter', this._handleMouseEnterBound);
+        this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound);
+        this.el.removeEventListener('focus', this._handleFocusBound, true);
+        this.el.removeEventListener('blur', this._handleBlurBound, true);
       }
     }, {
       key: 'open',
       value: function open() {
         if (this.isOpen) {
@@ -129,11 +136,11 @@
         var _this2 = this;
 
         clearTimeout(this._exitDelayTimeout);
 
         this._exitDelayTimeout = setTimeout(function () {
-          if (_this2.isHovered) {
+          if (_this2.isHovered || _this2.isFocused) {
             return;
           }
 
           _this2._animateOut();
         }, this.options.exitDelay);
@@ -149,21 +156,21 @@
         var _this3 = this;
 
         clearTimeout(this._enterDelayTimeout);
 
         this._enterDelayTimeout = setTimeout(function () {
-          if (!_this3.isHovered) {
+          if (!_this3.isHovered && !_this3.isFocused) {
             return;
           }
 
           _this3._animateIn();
         }, this.options.enterDelay);
       }
     }, {
       key: '_positionTooltip',
       value: function _positionTooltip() {
-        var origin = this.$el[0],
+        var origin = this.el,
             tooltip = this.tooltipEl,
             originHeight = origin.offsetHeight,
             originWidth = origin.offsetWidth,
             tooltipHeight = tooltip.offsetHeight,
             tooltipWidth = tooltip.offsetWidth,
@@ -275,14 +282,26 @@
       value: function _handleMouseLeave() {
         this.isHovered = false;
         this.close();
       }
     }, {
+      key: '_handleFocus',
+      value: function _handleFocus() {
+        this.isFocused = true;
+        this.open();
+      }
+    }, {
+      key: '_handleBlur',
+      value: function _handleBlur() {
+        this.isFocused = false;
+        this.close();
+      }
+    }, {
       key: '_getAttributeOptions',
       value: function _getAttributeOptions() {
         var attributeOptions = {};
-        var tooltipTextOption = this.$el[0].getAttribute('data-tooltip');
-        var positionOption = this.$el[0].getAttribute('data-position');
+        var tooltipTextOption = this.el.getAttribute('data-tooltip');
+        var positionOption = this.el.getAttribute('data-position');
 
         if (tooltipTextOption) {
           attributeOptions.html = tooltipTextOption;
         }