react-tooltip 4.2.6 → 4.2.10

package/dist/index.es.js

@@ -156,9 +156,9 @@ function _possibleConstructorReturn(self, call) {
 
 var CONSTANT = {
   GLOBAL: {
-    HIDE: "__react_tooltip_hide_event",
-    REBUILD: "__react_tooltip_rebuild_event",
-    SHOW: "__react_tooltip_show_event"
+    HIDE: '__react_tooltip_hide_event',
+    REBUILD: '__react_tooltip_rebuild_event',
+    SHOW: '__react_tooltip_show_event'
   }
 };
 
@@ -172,12 +172,12 @@ var dispatchGlobalEvent = function dispatchGlobalEvent(eventName, opts) {
   // @see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
   var event;
 
-  if (typeof window.CustomEvent === "function") {
+  if (typeof window.CustomEvent === 'function') {
     event = new window.CustomEvent(eventName, {
       detail: opts
     });
   } else {
-    event = document.createEvent("Event");
+    event = document.createEvent('Event');
     event.initEvent(eventName, false, true, opts);
   }
 
@@ -259,8 +259,8 @@ function windowListener (target) {
     window.addEventListener(CONSTANT.GLOBAL.SHOW, this.globalShow, false); // Resize
 
     if (resizeHide) {
-      window.removeEventListener("resize", this.onWindowResize);
-      window.addEventListener("resize", this.onWindowResize, false);
+      window.removeEventListener('resize', this.onWindowResize);
+      window.addEventListener('resize', this.onWindowResize, false);
     }
   };
 
@@ -268,7 +268,7 @@ function windowListener (target) {
     window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.globalHide);
     window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild);
     window.removeEventListener(CONSTANT.GLOBAL.SHOW, this.globalShow);
-    window.removeEventListener("resize", this.onWindowResize);
+    window.removeEventListener('resize', this.onWindowResize);
   };
   /**
    * invoked by resize event of window
@@ -292,13 +292,13 @@ var checkStatus = function checkStatus(dataEventOff, e) {
   var show = this.state.show;
   var id = this.props.id;
   var isCapture = this.isCapture(e.currentTarget);
-  var currentItem = e.currentTarget.getAttribute("currentItem");
+  var currentItem = e.currentTarget.getAttribute('currentItem');
   if (!isCapture) e.stopPropagation();
 
-  if (show && currentItem === "true") {
+  if (show && currentItem === 'true') {
     if (!dataEventOff) this.hideTooltip(e);
   } else {
-    e.currentTarget.setAttribute("currentItem", "true");
+    e.currentTarget.setAttribute('currentItem', 'true');
     setUntargetItems(e.currentTarget, this.getTargetArray(id));
     this.showTooltip(e);
   }
@@ -307,15 +307,15 @@ var checkStatus = function checkStatus(dataEventOff, e) {
 var setUntargetItems = function setUntargetItems(currentTarget, targetArray) {
   for (var i = 0; i < targetArray.length; i++) {
     if (currentTarget !== targetArray[i]) {
-      targetArray[i].setAttribute("currentItem", "false");
+      targetArray[i].setAttribute('currentItem', 'false');
     } else {
-      targetArray[i].setAttribute("currentItem", "true");
+      targetArray[i].setAttribute('currentItem', 'true');
     }
   }
 };
 
 var customListeners = {
-  id: "9b69f92e-d3fe-498b-b1b4-c5e63a51b0cf",
+  id: '9b69f92e-d3fe-498b-b1b4-c5e63a51b0cf',
   set: function set(target, event, listener) {
     if (this.id in target) {
       var map = target[this.id];
@@ -339,7 +339,7 @@ var customListeners = {
 function customEvent (target) {
   target.prototype.isCustomEvent = function (ele) {
     var event = this.state.event;
-    return event || !!ele.getAttribute("data-event");
+    return event || !!ele.getAttribute('data-event');
   };
   /* Bind listener for custom event */
 
@@ -350,9 +350,9 @@ function customEvent (target) {
     var _this$state = this.state,
         event = _this$state.event,
         eventOff = _this$state.eventOff;
-    var dataEvent = ele.getAttribute("data-event") || event;
-    var dataEventOff = ele.getAttribute("data-event-off") || eventOff;
-    dataEvent.split(" ").forEach(function (event) {
+    var dataEvent = ele.getAttribute('data-event') || event;
+    var dataEventOff = ele.getAttribute('data-event-off') || eventOff;
+    dataEvent.split(' ').forEach(function (event) {
       ele.removeEventListener(event, customListeners.get(ele, event));
       var customListener = checkStatus.bind(_this, dataEventOff);
       customListeners.set(ele, event, customListener);
@@ -360,7 +360,7 @@ function customEvent (target) {
     });
 
     if (dataEventOff) {
-      dataEventOff.split(" ").forEach(function (event) {
+      dataEventOff.split(' ').forEach(function (event) {
         ele.removeEventListener(event, _this.hideTooltip);
         ele.addEventListener(event, _this.hideTooltip, false);
       });
@@ -373,8 +373,8 @@ function customEvent (target) {
     var _this$state2 = this.state,
         event = _this$state2.event,
         eventOff = _this$state2.eventOff;
-    var dataEvent = event || ele.getAttribute("data-event");
-    var dataEventOff = eventOff || ele.getAttribute("data-event-off");
+    var dataEvent = event || ele.getAttribute('data-event');
+    var dataEventOff = eventOff || ele.getAttribute('data-event-off');
     ele.removeEventListener(dataEvent, customListeners.get(ele, event));
     if (dataEventOff) ele.removeEventListener(dataEventOff, this.hideTooltip);
   };
@@ -385,7 +385,7 @@ function customEvent (target) {
  */
 function isCapture (target) {
   target.prototype.isCapture = function (currentTarget) {
-    return currentTarget && currentTarget.getAttribute("data-iscapture") === "true" || this.props.isCapture || false;
+    return currentTarget && currentTarget.getAttribute('data-iscapture') === 'true' || this.props.isCapture || false;
   };
 }
 
@@ -394,8 +394,8 @@ function isCapture (target) {
  */
 function getEffect (target) {
   target.prototype.getEffect = function (currentTarget) {
-    var dataEffect = currentTarget.getAttribute("data-effect");
-    return dataEffect || this.props.effect || "float";
+    var dataEffect = currentTarget.getAttribute('data-effect');
+    return dataEffect || this.props.effect || 'float';
   };
 }
 
@@ -407,7 +407,7 @@ var makeProxy = function makeProxy(e) {
   var proxy = {};
 
   for (var key in e) {
-    if (typeof e[key] === "function") {
+    if (typeof e[key] === 'function') {
       proxy[key] = e[key].bind(e);
     } else {
       proxy[key] = e[key];
@@ -423,8 +423,8 @@ var bodyListener = function bodyListener(callback, options, e) {
       _options$customEvent = options.customEvent,
       customEvent = _options$customEvent === void 0 ? false : _options$customEvent;
   var id = this.props.id;
-  var tip = e.target.getAttribute("data-tip") || null;
-  var forId = e.target.getAttribute("data-for") || null;
+  var tip = e.target.getAttribute('data-tip') || null;
+  var forId = e.target.getAttribute('data-for') || null;
   var target = e.target;
 
   if (this.isCustomEvent(target) && !customEvent) {
@@ -433,7 +433,7 @@ var bodyListener = function bodyListener(callback, options, e) {
 
   var isTargetBelongsToTooltip = id == null && forId == null || forId === id;
 
-  if (tip != null && (!respectEffect || this.getEffect(target) === "float") && isTargetBelongsToTooltip) {
+  if (tip != null && (!respectEffect || this.getEffect(target) === 'float') && isTargetBelongsToTooltip) {
     var proxy = makeProxy(e);
     proxy.currentTarget = target;
     callback(proxy);
@@ -444,7 +444,7 @@ var findCustomEvents = function findCustomEvents(targetArray, dataAttribute) {
   var events = {};
   targetArray.forEach(function (target) {
     var event = target.getAttribute(dataAttribute);
-    if (event) event.split(" ").forEach(function (event) {
+    if (event) event.split(' ').forEach(function (event) {
       return events[event] = true;
     });
   });
@@ -452,7 +452,7 @@ var findCustomEvents = function findCustomEvents(targetArray, dataAttribute) {
 };
 
 var getBody = function getBody() {
-  return document.getElementsByTagName("body")[0];
+  return document.getElementsByTagName('body')[0];
 };
 
 function bodyMode (target) {
@@ -469,14 +469,14 @@ function bodyMode (target) {
         possibleCustomEvents = _this$state.possibleCustomEvents,
         possibleCustomEventsOff = _this$state.possibleCustomEventsOff;
     var body = getBody();
-    var customEvents = findCustomEvents(targetArray, "data-event");
-    var customEventsOff = findCustomEvents(targetArray, "data-event-off");
+    var customEvents = findCustomEvents(targetArray, 'data-event');
+    var customEventsOff = findCustomEvents(targetArray, 'data-event-off');
     if (event != null) customEvents[event] = true;
     if (eventOff != null) customEventsOff[eventOff] = true;
-    possibleCustomEvents.split(" ").forEach(function (event) {
+    possibleCustomEvents.split(' ').forEach(function (event) {
       return customEvents[event] = true;
     });
-    possibleCustomEventsOff.split(" ").forEach(function (event) {
+    possibleCustomEventsOff.split(' ').forEach(function (event) {
       return customEventsOff[event] = true;
     });
     this.unbindBodyListener(body);
@@ -492,7 +492,7 @@ function bodyMode (target) {
 
     for (var _event in customEvents) {
       listeners[_event] = bodyListener.bind(this, function (e) {
-        var targetEventOff = e.currentTarget.getAttribute("data-event-off") || eventOff;
+        var targetEventOff = e.currentTarget.getAttribute('data-event-off') || eventOff;
         checkStatus.call(_this, targetEventOff, e);
       }, {
         customEvent: true
@@ -671,7 +671,7 @@ function getPosition (e, target, node, place, desiredPlace, effect, offset) {
     return !outside(p);
   };
 
-  var placesList = ["top", "bottom", "left", "right"];
+  var placesList = ['top', 'bottom', 'left', 'right'];
   var insideList = [];
 
   for (var i = 0; i < 4; i++) {
@@ -733,7 +733,7 @@ var getCurrentOffset = function getCurrentOffset(e, currentTarget, effect) {
       targetWidth = _getDimensions3.width,
       targetHeight = _getDimensions3.height;
 
-  if (effect === "float") {
+  if (effect === 'float') {
     return {
       mouseX: e.clientX,
       mouseY: e.clientY
@@ -757,7 +757,7 @@ var getDefaultPosition = function getDefaultPosition(effect, targetWidth, target
   var triangleHeight = 2;
   var cursorHeight = 12; // Optimize for float bottom only, cause the cursor will hide the tooltip
 
-  if (effect === "float") {
+  if (effect === 'float') {
     top = {
       l: -(tipWidth / 2),
       r: tipWidth / 2,
@@ -782,7 +782,7 @@ var getDefaultPosition = function getDefaultPosition(effect, targetWidth, target
       t: -(tipHeight / 2),
       b: tipHeight / 2
     };
-  } else if (effect === "solid") {
+  } else if (effect === 'solid') {
     top = {
       l: -(tipWidth / 2),
       r: tipWidth / 2,
@@ -822,18 +822,18 @@ var calculateOffset = function calculateOffset(offset) {
   var extraOffsetX = 0;
   var extraOffsetY = 0;
 
-  if (Object.prototype.toString.apply(offset) === "[object String]") {
+  if (Object.prototype.toString.apply(offset) === '[object String]') {
     offset = JSON.parse(offset.toString().replace(/'/g, '"'));
   }
 
   for (var key in offset) {
-    if (key === "top") {
+    if (key === 'top') {
       extraOffsetY -= parseInt(offset[key], 10);
-    } else if (key === "bottom") {
+    } else if (key === 'bottom') {
       extraOffsetY += parseInt(offset[key], 10);
-    } else if (key === "left") {
+    } else if (key === 'left') {
       extraOffsetX -= parseInt(offset[key], 10);
-    } else if (key === "right") {
+    } else if (key === 'right') {
       extraOffsetX += parseInt(offset[key], 10);
     }
   }
@@ -849,7 +849,10 @@ var getParent = function getParent(currentTarget) {
   var currentParent = currentTarget;
 
   while (currentParent) {
-    if (window.getComputedStyle(currentParent).getPropertyValue("transform") !== "none") break;
+    var computedStyle = window.getComputedStyle(currentParent); // transform and will-change: transform change the containing block
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block
+
+    if (computedStyle.getPropertyValue('transform') !== 'none' || computedStyle.getPropertyValue('will-change') === 'transform') break;
     currentParent = currentParent.parentElement;
   }
 
@@ -882,7 +885,7 @@ function getTipContent (tip, children, getContent, multiline) {
 
   var regexp = /<br\s*\/?>/;
 
-  if (!multiline || multiline === "false" || !regexp.test(tip)) {
+  if (!multiline || multiline === 'false' || !regexp.test(tip)) {
     // No trim(), so that user can keep their input
     return tip;
   } // Multiline tooltip content
@@ -931,7 +934,7 @@ function nodeListToArray (nodeList) {
 }
 
 function generateUUID() {
-  return "t" + v4();
+  return 't' + v4();
 }
 
 ___$insertStyle(".__react_component_tooltip {\n  border-radius: 3px;\n  display: inline-block;\n  font-size: 13px;\n  left: -999em;\n  opacity: 0;\n  padding: 8px 21px;\n  position: fixed;\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n  top: -999em;\n  visibility: hidden;\n  z-index: 999;\n}\n.__react_component_tooltip.allow_hover, .__react_component_tooltip.allow_click {\n  pointer-events: auto;\n}\n.__react_component_tooltip::before, .__react_component_tooltip::after {\n  content: \"\";\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n.__react_component_tooltip.show {\n  opacity: 0.9;\n  margin-top: 0;\n  margin-left: 0;\n  visibility: visible;\n}\n.__react_component_tooltip.place-top::before {\n  border-left: 10px solid transparent;\n  border-right: 10px solid transparent;\n  bottom: -8px;\n  left: 50%;\n  margin-left: -10px;\n}\n.__react_component_tooltip.place-bottom::before {\n  border-left: 10px solid transparent;\n  border-right: 10px solid transparent;\n  top: -8px;\n  left: 50%;\n  margin-left: -10px;\n}\n.__react_component_tooltip.place-left::before {\n  border-top: 6px solid transparent;\n  border-bottom: 6px solid transparent;\n  right: -8px;\n  top: 50%;\n  margin-top: -5px;\n}\n.__react_component_tooltip.place-right::before {\n  border-top: 6px solid transparent;\n  border-bottom: 6px solid transparent;\n  left: -8px;\n  top: 50%;\n  margin-top: -5px;\n}\n.__react_component_tooltip .multi-line {\n  display: block;\n  padding: 2px 0;\n  text-align: center;\n}");
@@ -940,41 +943,41 @@ ___$insertStyle(".__react_component_tooltip {\n  border-radius: 3px;\n  display:
  * Default pop-up style values (text color, background color).
  */
 var defaultColors = {
-  "dark": {
-    "text": "#fff",
-    "background": "#222",
-    "border": "transparent",
-    "arrow": "#222"
+  dark: {
+    text: '#fff',
+    background: '#222',
+    border: 'transparent',
+    arrow: '#222'
   },
-  "success": {
-    "text": "#fff",
-    "background": "#8DC572",
-    "border": "transparent",
-    "arrow": "#8DC572"
+  success: {
+    text: '#fff',
+    background: '#8DC572',
+    border: 'transparent',
+    arrow: '#8DC572'
   },
-  "warning": {
-    "text": "#fff",
-    "background": "#F0AD4E",
-    "border": "transparent",
-    "arrow": "#F0AD4E"
+  warning: {
+    text: '#fff',
+    background: '#F0AD4E',
+    border: 'transparent',
+    arrow: '#F0AD4E'
   },
-  "error": {
-    "text": "#fff",
-    "background": "#BE6464",
-    "border": "transparent",
-    "arrow": "#BE6464"
+  error: {
+    text: '#fff',
+    background: '#BE6464',
+    border: 'transparent',
+    arrow: '#BE6464'
   },
-  "info": {
-    "text": "#fff",
-    "background": "#337AB7",
-    "border": "transparent",
-    "arrow": "#337AB7"
+  info: {
+    text: '#fff',
+    background: '#337AB7',
+    border: 'transparent',
+    arrow: '#337AB7'
   },
-  "light": {
-    "text": "#222",
-    "background": "#fff",
-    "border": "transparent",
-    "arrow": "#fff"
+  light: {
+    text: '#222',
+    background: '#fff',
+    border: 'transparent',
+    arrow: '#fff'
   }
 };
 function getDefaultPopupColors(type) {
@@ -982,8 +985,8 @@ function getDefaultPopupColors(type) {
 }
 
 /**
-* Generates the specific tooltip style for use on render.
-*/
+ * Generates the specific tooltip style for use on render.
+ */
 
 function generateTooltipStyle(uuid, customColors, type, hasBorder) {
   return generateStyle(uuid, getPopupColors(customColors, type, hasBorder));
@@ -1019,7 +1022,7 @@ function getPopupColors(customColors, type, hasBorder) {
     if (borderColor) {
       colors.border = borderColor;
     } else {
-      colors.border = type === "light" ? "black" : "white";
+      colors.border = type === 'light' ? 'black' : 'white';
     }
   }
 
@@ -1089,18 +1092,18 @@ function (_React$Component) {
     _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactTooltip).call(this, props));
     _this.state = {
       uuid: props.uuid || generateUUID(),
-      place: props.place || "top",
+      place: props.place || 'top',
       // Direction of tooltip
-      desiredPlace: props.place || "top",
-      type: "dark",
+      desiredPlace: props.place || 'top',
+      type: 'dark',
       // Color theme of tooltip
-      effect: "float",
+      effect: 'float',
       // float or fixed
       show: false,
       border: false,
       customColors: {},
       offset: {},
-      extraClass: "",
+      extraClass: '',
       html: false,
       delayHide: 0,
       delayShow: 0,
@@ -1114,13 +1117,13 @@ function (_React$Component) {
       // aria- and role attributes
       isEmptyTip: false,
       disable: false,
-      possibleCustomEvents: props.possibleCustomEvents || "",
-      possibleCustomEventsOff: props.possibleCustomEventsOff || "",
+      possibleCustomEvents: props.possibleCustomEvents || '',
+      possibleCustomEventsOff: props.possibleCustomEventsOff || '',
       originTooltip: null,
       isMultiline: false
     };
 
-    _this.bind(["showTooltip", "updateTooltip", "hideTooltip", "hideTooltipOnScroll", "getTooltipContent", "globalRebuild", "globalShow", "globalHide", "onWindowResize", "mouseOnToolTip"]);
+    _this.bind(['showTooltip', 'updateTooltip', 'hideTooltip', 'hideTooltipOnScroll', 'getTooltipContent', 'globalRebuild', 'globalShow', 'globalHide', 'onWindowResize', 'mouseOnToolTip']);
 
     _this.mount = true;
     _this.delayShowLoop = null;
@@ -1184,7 +1187,7 @@ function (_React$Component) {
           }
         }
 
-        return this.tooltipRef.matches(":hover");
+        return this.tooltipRef.matches(':hover');
       }
 
       return false;
@@ -1200,14 +1203,14 @@ function (_React$Component) {
       var selector;
 
       if (!id) {
-        selector = "[data-tip]:not([data-for])";
+        selector = '[data-tip]:not([data-for])';
       } else {
-        var escaped = id.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+        var escaped = id.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
         selector = "[data-tip][data-for=\"".concat(escaped, "\"]");
       } // Scan document for shadow DOM elements
 
 
-      nodeListToArray(document.getElementsByTagName("*")).filter(function (element) {
+      nodeListToArray(document.getElementsByTagName('*')).filter(function (element) {
         return element.shadowRoot;
       }).forEach(function (element) {
         targetArray = targetArray.concat(nodeListToArray(element.shadowRoot.querySelectorAll(selector)));
@@ -1230,8 +1233,8 @@ function (_React$Component) {
           isCapture = _this$props2.isCapture;
       var targetArray = this.getTargetArray(id);
       targetArray.forEach(function (target) {
-        if (target.getAttribute("currentItem") === null) {
-          target.setAttribute("currentItem", "false");
+        if (target.getAttribute('currentItem') === null) {
+          target.setAttribute('currentItem', 'false');
         }
 
         _this3.unbindBasicListener(target);
@@ -1255,13 +1258,13 @@ function (_React$Component) {
             return;
           }
 
-          target.addEventListener("mouseenter", _this3.showTooltip, isCaptureMode);
+          target.addEventListener('mouseenter', _this3.showTooltip, isCaptureMode);
 
-          if (effect === "float") {
-            target.addEventListener("mousemove", _this3.updateTooltip, isCaptureMode);
+          if (effect === 'float') {
+            target.addEventListener('mousemove', _this3.updateTooltip, isCaptureMode);
           }
 
-          target.addEventListener("mouseleave", _this3.hideTooltip, isCaptureMode);
+          target.addEventListener('mouseleave', _this3.hideTooltip, isCaptureMode);
         });
       } // Global event to hide tooltip
 
@@ -1311,9 +1314,9 @@ function (_React$Component) {
     key: "unbindBasicListener",
     value: function unbindBasicListener(target) {
       var isCaptureMode = this.isCapture(target);
-      target.removeEventListener("mouseenter", this.showTooltip, isCaptureMode);
-      target.removeEventListener("mousemove", this.updateTooltip, isCaptureMode);
-      target.removeEventListener("mouseleave", this.hideTooltip, isCaptureMode);
+      target.removeEventListener('mouseenter', this.showTooltip, isCaptureMode);
+      target.removeEventListener('mousemove', this.updateTooltip, isCaptureMode);
+      target.removeEventListener('mouseleave', this.hideTooltip, isCaptureMode);
     }
   }, {
     key: "getTooltipContent",
@@ -1337,7 +1340,7 @@ function (_React$Component) {
   }, {
     key: "isEmptyTip",
     value: function isEmptyTip(placeholder) {
-      return typeof placeholder === "string" && placeholder === "" || placeholder === null;
+      return typeof placeholder === 'string' && placeholder === '' || placeholder === null;
     }
     /**
      * When mouse enter, show the tooltip
@@ -1346,6 +1349,10 @@ function (_React$Component) {
   }, {
     key: "showTooltip",
     value: function showTooltip(e, isGlobalCall) {
+      if (!this.tooltipRef) {
+        return;
+      }
+
       if (isGlobalCall) {
         // Don't trigger other elements belongs to other ReactTooltip
         var targetArray = this.getTargetArray(this.props.id);
@@ -1360,23 +1367,23 @@ function (_React$Component) {
       var _this$props5 = this.props,
           multiline = _this$props5.multiline,
           getContent = _this$props5.getContent;
-      var originTooltip = e.currentTarget.getAttribute("data-tip");
-      var isMultiline = e.currentTarget.getAttribute("data-multiline") || multiline || false; // If it is focus event or called by ReactTooltip.show, switch to `solid` effect
+      var originTooltip = e.currentTarget.getAttribute('data-tip');
+      var isMultiline = e.currentTarget.getAttribute('data-multiline') || multiline || false; // If it is focus event or called by ReactTooltip.show, switch to `solid` effect
 
       var switchToSolid = e instanceof window.FocusEvent || isGlobalCall; // if it needs to skip adding hide listener to scroll
 
       var scrollHide = true;
 
-      if (e.currentTarget.getAttribute("data-scroll-hide")) {
-        scrollHide = e.currentTarget.getAttribute("data-scroll-hide") === "true";
+      if (e.currentTarget.getAttribute('data-scroll-hide')) {
+        scrollHide = e.currentTarget.getAttribute('data-scroll-hide') === 'true';
       } else if (this.props.scrollHide != null) {
         scrollHide = this.props.scrollHide;
       } // Make sure the correct place is set
 
 
-      var desiredPlace = e.currentTarget.getAttribute("data-place") || this.props.place || "top";
-      var effect = switchToSolid && "solid" || this.getEffect(e.currentTarget);
-      var offset = e.currentTarget.getAttribute("data-offset") || this.props.offset || {};
+      var desiredPlace = e.currentTarget.getAttribute('data-place') || this.props.place || 'top';
+      var effect = switchToSolid && 'solid' || this.getEffect(e.currentTarget);
+      var offset = e.currentTarget.getAttribute('data-offset') || this.props.offset || {};
       var result = getPosition(e, e.currentTarget, this.tooltipRef, desiredPlace, desiredPlace, effect, offset);
 
       if (result.position && this.props.overridePosition) {
@@ -1387,7 +1394,7 @@ function (_React$Component) {
 
       this.clearTimer();
       var target = e.currentTarget;
-      var reshowDelay = this.state.show ? target.getAttribute("data-delay-update") || this.props.delayUpdate : 0;
+      var reshowDelay = this.state.show ? target.getAttribute('data-delay-update') || this.props.delayUpdate : 0;
       var self = this;
 
       var updateState = function updateState() {
@@ -1396,22 +1403,22 @@ function (_React$Component) {
           isMultiline: isMultiline,
           desiredPlace: desiredPlace,
           place: place,
-          type: target.getAttribute("data-type") || self.props.type || "dark",
+          type: target.getAttribute('data-type') || self.props.type || 'dark',
           customColors: {
-            text: target.getAttribute("data-text-color") || self.props.textColor || null,
-            background: target.getAttribute("data-background-color") || self.props.backgroundColor || null,
-            border: target.getAttribute("data-border-color") || self.props.borderColor || null,
-            arrow: target.getAttribute("data-arrow-color") || self.props.arrowColor || null
+            text: target.getAttribute('data-text-color') || self.props.textColor || null,
+            background: target.getAttribute('data-background-color') || self.props.backgroundColor || null,
+            border: target.getAttribute('data-border-color') || self.props.borderColor || null,
+            arrow: target.getAttribute('data-arrow-color') || self.props.arrowColor || null
           },
           effect: effect,
           offset: offset,
-          html: (target.getAttribute("data-html") ? target.getAttribute("data-html") === "true" : self.props.html) || false,
-          delayShow: target.getAttribute("data-delay-show") || self.props.delayShow || 0,
-          delayHide: target.getAttribute("data-delay-hide") || self.props.delayHide || 0,
-          delayUpdate: target.getAttribute("data-delay-update") || self.props.delayUpdate || 0,
-          border: (target.getAttribute("data-border") ? target.getAttribute("data-border") === "true" : self.props.border) || false,
-          extraClass: target.getAttribute("data-class") || self.props["class"] || self.props.className || "",
-          disable: (target.getAttribute("data-tip-disable") ? target.getAttribute("data-tip-disable") === "true" : self.props.disable) || false,
+          html: (target.getAttribute('data-html') ? target.getAttribute('data-html') === 'true' : self.props.html) || false,
+          delayShow: target.getAttribute('data-delay-show') || self.props.delayShow || 0,
+          delayHide: target.getAttribute('data-delay-hide') || self.props.delayHide || 0,
+          delayUpdate: target.getAttribute('data-delay-update') || self.props.delayUpdate || 0,
+          border: (target.getAttribute('data-border') ? target.getAttribute('data-border') === 'true' : self.props.border) || false,
+          extraClass: target.getAttribute('data-class') || self.props["class"] || self.props.className || '',
+          disable: (target.getAttribute('data-tip-disable') ? target.getAttribute('data-tip-disable') === 'true' : self.props.disable) || false,
           currentTarget: target
         }, function () {
           if (scrollHide) {
@@ -1424,7 +1431,7 @@ function (_React$Component) {
             self.intervalUpdateContent = setInterval(function () {
               if (self.mount) {
                 var _getContent = self.props.getContent;
-                var placeholder = getTipContent(originTooltip, "", _getContent[0](), isMultiline);
+                var placeholder = getTipContent(originTooltip, '', _getContent[0](), isMultiline);
                 var isEmptyTip = self.isEmptyTip(placeholder);
                 self.setState({
                   isEmptyTip: isEmptyTip
@@ -1505,7 +1512,7 @@ function (_React$Component) {
       var show = this.state.show;
 
       if (show && this.tooltipRef) {
-        this.tooltipRef.addEventListener("mouseleave", this.hideTooltip);
+        this.tooltipRef.addEventListener('mouseleave', this.hideTooltip);
       }
     }
   }, {
@@ -1514,7 +1521,7 @@ function (_React$Component) {
       var show = this.state.show;
 
       if (show && this.tooltipRef) {
-        this.tooltipRef.removeEventListener("mouseleave", this.hideTooltip);
+        this.tooltipRef.removeEventListener('mouseleave', this.hideTooltip);
       }
     }
     /**
@@ -1596,13 +1603,13 @@ function (_React$Component) {
     key: "addScrollListener",
     value: function addScrollListener(currentTarget) {
       var isCaptureMode = this.isCapture(currentTarget);
-      window.addEventListener("scroll", this.hideTooltipOnScroll, isCaptureMode);
+      window.addEventListener('scroll', this.hideTooltipOnScroll, isCaptureMode);
     }
   }, {
     key: "removeScrollListener",
     value: function removeScrollListener(currentTarget) {
       var isCaptureMode = this.isCapture(currentTarget);
-      window.removeEventListener("scroll", this.hideTooltipOnScroll, isCaptureMode);
+      window.removeEventListener('scroll', this.hideTooltipOnScroll, isCaptureMode);
     } // Calculation the position
 
   }, {
@@ -1632,8 +1639,8 @@ function (_React$Component) {
       } // Set tooltip position
 
 
-      node.style.left = result.position.left + "px";
-      node.style.top = result.position.top + "px";
+      node.style.left = result.position.left + 'px';
+      node.style.top = result.position.top + 'px';
     }
     /**
      * CLear all kinds of timeout of interval
@@ -1653,8 +1660,8 @@ function (_React$Component) {
       var _this8 = this;
 
       return Boolean(Object.keys(this.state.customColors).find(function (color) {
-        return color !== "border" && _this8.state.customColors[color];
-      }) || this.state.border && this.state.customColors["border"]);
+        return color !== 'border' && _this8.state.customColors[color];
+      }) || this.state.border && this.state.customColors['border']);
     }
   }, {
     key: "render",
@@ -1669,16 +1676,16 @@ function (_React$Component) {
       var content = this.getTooltipContent();
       var isEmptyTip = this.isEmptyTip(content);
       var style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border);
-      var tooltipClass = "__react_component_tooltip" + " ".concat(this.state.uuid) + (this.state.show && !disable && !isEmptyTip ? " show" : "") + (this.state.border ? " border" : "") + " place-".concat(this.state.place) + // top, bottom, left, right
-      " type-".concat(this.hasCustomColors() ? "custom" : this.state.type) + ( // dark, success, warning, error, info, light, custom
-      this.props.delayUpdate ? " allow_hover" : "") + (this.props.clickable ? " allow_click" : "");
+      var tooltipClass = '__react_component_tooltip' + " ".concat(this.state.uuid) + (this.state.show && !disable && !isEmptyTip ? ' show' : '') + (this.state.border ? ' border' : '') + " place-".concat(this.state.place) + // top, bottom, left, right
+      " type-".concat(this.hasCustomColors() ? 'custom' : this.state.type) + ( // dark, success, warning, error, info, light, custom
+      this.props.delayUpdate ? ' allow_hover' : '') + (this.props.clickable ? ' allow_click' : '');
       var Wrapper = this.props.wrapper;
 
       if (ReactTooltip.supportedWrappers.indexOf(Wrapper) < 0) {
         Wrapper = ReactTooltip.defaultProps.wrapper;
       }
 
-      var wrapperClassName = [tooltipClass, extraClass].filter(Boolean).join(" ");
+      var wrapperClassName = [tooltipClass, extraClass].filter(Boolean).join(' ');
 
       if (html) {
         var htmlContent = "".concat(content, "\n<style>").concat(style, "</style>");
@@ -1733,9 +1740,9 @@ function (_React$Component) {
 }(React.Component), _defineProperty(_class2, "defaultProps", {
   insecure: true,
   resizeHide: true,
-  wrapper: "div",
+  wrapper: 'div',
   clickable: false
-}), _defineProperty(_class2, "supportedWrappers", ["div", "span"]), _defineProperty(_class2, "displayName", "ReactTooltip"), _temp)) || _class) || _class) || _class) || _class) || _class) || _class) || _class;
+}), _defineProperty(_class2, "supportedWrappers", ['div', 'span']), _defineProperty(_class2, "displayName", 'ReactTooltip'), _temp)) || _class) || _class) || _class) || _class) || _class) || _class) || _class;
 
 export default ReactTooltip;
 //# sourceMappingURL=index.es.js.map