@dnb/eufemia 9.32.0 → 9.32.1

package/components/slider/hooks/useSliderEvents.js

@@ -19,7 +19,8 @@ export function useSliderEvents() {
       onDragStart = allProps.onDragStart,
       onDragEnd = allProps.onDragEnd;
 
-  var onTrackMouseUpHandler = function onTrackMouseUpHandler(event) {
+  var onTrackMouseDownHandler = function onTrackMouseDownHandler(event) {
+    onThumbMouseDownHandler(event);
     var percent = calculatePercent(trackRef.current, event, isVertical);
     emitChange(event, percentToValue(percent, min, max, isReverse));
     setShouldAnimate(true);
@@ -107,7 +108,7 @@ export function useSliderEvents() {
   return {
     onThumbMouseDownHandler: onThumbMouseDownHandler,
     onThumbMouseUpHandler: onThumbMouseUpHandler,
-    onTrackMouseUpHandler: onTrackMouseUpHandler,
+    onTrackMouseDownHandler: onTrackMouseDownHandler,
     onHelperChangeHandler: onHelperChangeHandler,
     onHelperFocusHandler: onHelperFocusHandler,
     removeEvents: removeEvents

package/components/tooltip/Tooltip.js

@@ -18,12 +18,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import classnames from 'classnames';
 import Context from '../../shared/Context';
-import { makeUniqueId, validateDOMAttributes, isTrue } from '../../shared/component-helper';
+import { makeUniqueId, validateDOMAttributes } from '../../shared/component-helper';
 import { createSpacingClasses } from '../space/SpacingHelper';
-import TooltipContainer from './TooltipContainer';
 import TooltipWithEvents from './TooltipWithEvents';
-import TooltipPortal from './TooltipPortal';
-import { defaultProps, getPropsFromTooltipProp, injectTooltipSemantic } from './TooltipHelpers';
+import { defaultProps, getPropsFromTooltipProp, getRefElement, getTargetElement, injectTooltipSemantic } from './TooltipHelpers';
 import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps';
 
 function Tooltip(localProps) {
@@ -50,13 +48,24 @@ function Tooltip(localProps) {
       align = props.align,
       params = _objectWithoutProperties(props, _excluded);
 
-  var _React$useState = React.useState(function () {
+  var target = targetElement || targetSelector;
+
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      element = _React$useState2[0],
+      setElement = _React$useState2[1];
+
+  var _React$useState3 = React.useState(function () {
     return props.id || makeUniqueId();
   }),
-      _React$useState2 = _slicedToArray(_React$useState, 1),
-      internalId = _React$useState2[0];
+      _React$useState4 = _slicedToArray(_React$useState3, 1),
+      internalId = _React$useState4[0];
 
   props.internalId = internalId;
+  React.useEffect(function () {
+    var element = getTargetElement(getRefElement(target));
+    setElement(element);
+  }, [target]);
   var classes = classnames('dnb-tooltip', createSpacingClasses(props), className, size === 'large' && 'dnb-tooltip--large');
 
   var attributes = _objectSpread({
@@ -65,20 +74,14 @@ function Tooltip(localProps) {
 
   validateDOMAttributes(localProps, attributes);
 
-  if (!isTrue(props.active)) {
-    delete props.active;
+  if (target && !element) {
+    return null;
   }
 
-  return React.createElement(React.Fragment, null, skipPortal ? React.createElement(TooltipContainer, _extends({
-    target: targetElement,
-    attributes: attributes
-  }, props), props.children) : targetElement ? React.createElement(TooltipWithEvents, _extends({
-    target: targetElement,
-    attributes: attributes
-  }, props), props.children) : targetSelector && React.createElement(TooltipPortal, _extends({
-    target: targetSelector,
+  return React.createElement(TooltipWithEvents, _extends({
+    target: element,
     attributes: attributes
-  }, props), props.children));
+  }, props), props.children);
 }
 
 export { injectTooltipSemantic };

package/components/tooltip/TooltipContainer.js

@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import { isTrue } from '../../shared/component-helper';
-import { getOffsetLeft } from '../../shared/helpers';
+import { getOffsetLeft, getOffsetTop } from '../../shared/helpers';
 import classnames from 'classnames';
 export default function TooltipContainer(props) {
   var internalId = props.internalId,
@@ -25,11 +25,16 @@ export default function TooltipContainer(props) {
       attributes = props.attributes,
       arrow = props.arrow,
       position = props.position,
+      align = props.align,
+      group = props.group,
+      hideDelay = props.hideDelay,
       animatePosition = props.animatePosition,
       fixedPosition = props.fixedPosition,
       noAnimation = props.noAnimation,
+      skipPortal = props.skipPortal,
       useHover = props.useHover,
-      children = props.children;
+      children = props.children,
+      target = props.targetElement;
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -77,7 +82,7 @@ export default function TooltipContainer(props) {
       }
 
       try {
-        resizeObserver.current = new ResizeObserver(function (entries) {
+        resizeObserver.current = new ResizeObserver(function () {
           clearTimeout(debounceTimeout.current);
           debounceTimeout.current = setTimeout(function () {
             return forceRerender(getBodySize());
@@ -103,19 +108,29 @@ export default function TooltipContainer(props) {
 
     return removePositionObserver;
   }, [isActive]);
+  var offsetLeft = React.useRef(0);
+  var offsetTop = React.useRef(0);
   React.useLayoutEffect(function () {
+    if (!isActive) {
+      if (group && wasActive) {
+        clearTimeout(debounceTimeout.current);
+        debounceTimeout.current = setTimeout(function () {
+          return setStyle(null);
+        }, hideDelay);
+      }
+
+      return;
+    }
+
     var element = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
-    var target = props.targetElement,
-        align = props.align,
-        fixedPosition = props.fixedPosition;
 
     if (typeof window === 'undefined' || !element || !(target !== null && target !== void 0 && target.getBoundingClientRect)) {
       return;
     }
 
+    var alignOffset = 0;
     var elementWidth = element.offsetWidth;
     var elementHeight = element.offsetHeight;
-    var alignOffset = 0;
     var rect = target.getBoundingClientRect();
     var targetBodySize = {
       width: target.offsetWidth,
@@ -127,16 +142,21 @@ export default function TooltipContainer(props) {
       targetBodySize.height = rect.height;
     }
 
+    if (skipPortal && (!offsetLeft.current || !offsetTop.current)) {
+      offsetLeft.current = getOffsetLeft(element) - offset.current;
+      offsetTop.current = getOffsetTop(element) - offset.current;
+    }
+
     var scrollY = window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
     var scrollX = window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
 
-    var _top = (isTrue(fixedPosition) ? 0 : scrollY) + rect.top;
+    var _top = (isTrue(fixedPosition) ? 0 : scrollY) + rect.top - offsetTop.current;
 
     var useMouseWhen = targetBodySize.width > 400;
     var mousePos = getOffsetLeft(target) + rect.left / 2 + (element ? element.offsetWidth : 0);
     var widthBased = scrollX + rect.left;
 
-    var _left = useMouseWhen && mousePos < targetBodySize.width ? mousePos : widthBased;
+    var _left = (useMouseWhen && mousePos < targetBodySize.width ? mousePos : widthBased) - offsetLeft.current;
 
     var style = _objectSpread({}, props.style);
 
@@ -183,9 +203,7 @@ export default function TooltipContainer(props) {
 
     if (stylesFromPosition[position]) {
       stylesFromPosition[position]();
-    }
-
-    if (stylesFromArrow[arrow]) {
+    } else if (stylesFromArrow[arrow]) {
       stylesFromArrow[arrow]();
     }
 
@@ -203,10 +221,8 @@ export default function TooltipContainer(props) {
       style.top = 0;
     }
 
-    if (isActive) {
-      setStyle(style);
-    }
-  }, [isActive, arrow, position, children, renewStyles]);
+    setStyle(style);
+  }, [active, arrow, position, children, renewStyles]);
 
   var handleMouseEnter = function handleMouseEnter() {
     if (isTrue(active) && useHover !== false) {
@@ -220,12 +236,19 @@ export default function TooltipContainer(props) {
     }
   };
 
+  var handlePropagation = function handlePropagation(e) {
+    return e.stopPropagation();
+  };
+
   return React.createElement("span", _extends({
     role: "tooltip",
-    "aria-hidden": true,
+    "aria-hidden": target ? true : undefined,
     ref: elementRef,
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
+    onMouseLeave: handleMouseLeave,
+    onMouseMove: handlePropagation,
+    onMouseDown: handlePropagation,
+    onTouchStart: handlePropagation
   }, attributes, {
     className: classnames(attributes === null || attributes === void 0 ? void 0 : attributes.className, isActive ? 'dnb-tooltip--active' : wasActive && 'dnb-tooltip--hide', isTrue(animatePosition) && 'dnb-tooltip--animate_position', isTrue(noAnimation) && 'dnb-tooltip--no-animation', isTrue(fixedPosition) && 'dnb-tooltip--fixed'),
     style: _objectSpread(_objectSpread({}, style), attributes.style)

package/components/tooltip/TooltipHelpers.d.ts

@@ -25,7 +25,7 @@ export declare const defaultProps: {
     tooltip: any;
 };
 export declare function getTargetElement(target: HTMLElement): HTMLElement;
-export declare function useHandleAria(targetElement: React.RefObject<HTMLElement>, internalId: string): void;
+export declare function useHandleAria(targetElement: HTMLElement, internalId: string): void;
 export declare function getPropsFromTooltipProp(localProps: any): any;
 export declare function getRefElement(target: React.RefObject<HTMLElement>): any;
 export declare const isTouch: (type: string) => boolean;

package/components/tooltip/TooltipHelpers.js

@@ -35,14 +35,10 @@ export function getTargetElement(target) {
 export function useHandleAria(targetElement, internalId) {
   React.useEffect(function () {
     try {
-      var elem = getTargetElement(getRefElement(targetElement));
-
-      if (!(elem !== null && elem !== void 0 && elem.classList.contains('dnb-tooltip__wrapper'))) {
-        var existing = {
-          'aria-describedby': elem.getAttribute('aria-describedby')
-        };
-        elem.setAttribute('aria-describedby', combineDescribedBy(existing, internalId));
-      }
+      var existing = {
+        'aria-describedby': targetElement.getAttribute('aria-describedby')
+      };
+      targetElement.setAttribute('aria-describedby', combineDescribedBy(existing, internalId));
     } catch (e) {}
   }, [targetElement, internalId]);
 }
@@ -61,7 +57,7 @@ export function getRefElement(target) {
     element = getRefElement(unknownTarget.current._ref);
   }
 
-  if (Object.prototype.hasOwnProperty.call(element, 'current')) {
+  if (element && Object.prototype.hasOwnProperty.call(element, 'current')) {
     element = element.current;
   }
 

package/components/tooltip/TooltipPortal.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import { TooltipProps } from './types';
 declare type TooltipPortalProps = {
-    target: HTMLElement;
+    targetElement: HTMLElement;
     active: boolean;
     keepInDOM?: boolean;
     group?: string;

package/components/tooltip/TooltipPortal.js

@@ -6,7 +6,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { makeUniqueId, warn } from '../../shared/component-helper';
 import TooltipContainer from './TooltipContainer';
-import { getTargetElement } from './TooltipHelpers';
 var tooltipPortal;
 
 if (typeof globalThis !== 'undefined') {
@@ -18,7 +17,7 @@ if (typeof globalThis !== 'undefined') {
 
 function TooltipPortal(props) {
   var active = props.active,
-      target = props.target,
+      targetElement = props.targetElement,
       hideDelay = props.hideDelay,
       keepInDOM = props.keepInDOM,
       noAnimation = props.noAnimation,
@@ -38,41 +37,57 @@ function TooltipPortal(props) {
     return props.group || makeUniqueId();
   }),
       _React$useState6 = _slicedToArray(_React$useState5, 1),
-      group = _React$useState6[0];
+      id = _React$useState6[0];
 
   var isInDOM = React.useRef(false);
   var hasGroup = props.group;
 
-  if (tooltipPortal[group]) {
-    tooltipPortal[group].inDOM = isInDOM.current;
-  }
-
   var makePortal = function makePortal() {
-    if (!tooltipPortal[group]) {
-      tooltipPortal[group] = {
-        node: hasGroup ? createGroupElement(group) : createRootElement('dnb-tooltip__portal')
+    if (!tooltipPortal[id]) {
+      tooltipPortal[id] = {
+        count: 0,
+        node: hasGroup ? createGroupElement(id) : createRootElement()
       };
     }
   };
 
-  var removeFromDOM = function removeFromDOM() {
-    if (!keepInDOM && hasGroup && tooltipPortal[group] && !tooltipPortal[group].inDOM) {
-      ReactDOM.unmountComponentAtNode(tooltipPortal[group].node);
+  var removeFromDOM = function removeFromDOM(hide) {
+    if (isActive && hide) {
+      return;
+    }
+
+    var ref = tooltipPortal[id];
+
+    if (ref !== null && ref !== void 0 && ref.node) {
+      ref.count--;
+
+      if (ref.count <= 0) {
+        if (hasGroup) {
+          ReactDOM.unmountComponentAtNode(ref.node);
+          createRootElement().removeChild(ref.node);
+        }
+
+        delete tooltipPortal[id];
+      }
     }
   };
 
   React.useEffect(function () {
-    var _tooltipPortal$group, _tooltipPortal$group2;
+    var _tooltipPortal$id, _tooltipPortal$id2;
 
     setIsMounted(true);
-    clearTimeout((_tooltipPortal$group = tooltipPortal[group]) === null || _tooltipPortal$group === void 0 ? void 0 : _tooltipPortal$group.delayTimeout);
-    clearTimeout((_tooltipPortal$group2 = tooltipPortal[group]) === null || _tooltipPortal$group2 === void 0 ? void 0 : _tooltipPortal$group2.hiddenTimeout);
+    clearTimeout((_tooltipPortal$id = tooltipPortal[id]) === null || _tooltipPortal$id === void 0 ? void 0 : _tooltipPortal$id.delayTimeout);
+    clearTimeout((_tooltipPortal$id2 = tooltipPortal[id]) === null || _tooltipPortal$id2 === void 0 ? void 0 : _tooltipPortal$id2.hiddenTimeout);
 
     if (active) {
       makePortal();
       setIsActive(true);
       isInDOM.current = true;
 
+      if (!isMounted) {
+        tooltipPortal[id].count++;
+      }
+
       if (hasGroup) {
         renderPortal(true);
       }
@@ -87,19 +102,19 @@ function TooltipPortal(props) {
 
       var delayHidden = function delayHidden() {
         isInDOM.current = false;
-        removeFromDOM();
+        removeFromDOM(true);
       };
 
       if (noAnimation || globalThis.IS_TEST) {
         delayRender();
         delayHidden();
-      } else if (tooltipPortal[group]) {
+      } else if (tooltipPortal[id]) {
         var delay = parseFloat(String(hideDelay));
-        tooltipPortal[group].delayTimeout = setTimeout(delayRender, delay);
-        tooltipPortal[group].hiddenTimeout = setTimeout(delayHidden, delay + 300);
+        tooltipPortal[id].delayTimeout = setTimeout(delayRender, delay);
+        tooltipPortal[id].hiddenTimeout = setTimeout(delayHidden, delay + 300);
       }
     }
-  }, [children, active, group, hideDelay, noAnimation]);
+  }, [children, active, id, hideDelay, noAnimation]);
   React.useEffect(function () {
     if (keepInDOM) {
       makePortal();
@@ -109,13 +124,13 @@ function TooltipPortal(props) {
   }, []);
 
   var renderPortal = function renderPortal(isActive) {
-    var _tooltipPortal$group3;
+    var _tooltipPortal$id3;
 
-    var root = (_tooltipPortal$group3 = tooltipPortal[group]) === null || _tooltipPortal$group3 === void 0 ? void 0 : _tooltipPortal$group3.node;
+    var root = (_tooltipPortal$id3 = tooltipPortal[id]) === null || _tooltipPortal$id3 === void 0 ? void 0 : _tooltipPortal$id3.node;
 
     if (root && hasGroup && isInDOM.current) {
       ReactDOM.render(React.createElement(TooltipContainer, _extends({}, props, {
-        targetElement: getTargetElement(target),
+        targetElement: targetElement,
         active: isActive
       })), root);
     }
@@ -124,13 +139,13 @@ function TooltipPortal(props) {
   };
 
   if (!hasGroup) {
-    var _tooltipPortal$group4;
+    var _tooltipPortal$id4;
 
-    var root = (_tooltipPortal$group4 = tooltipPortal[group]) === null || _tooltipPortal$group4 === void 0 ? void 0 : _tooltipPortal$group4.node;
+    var root = (_tooltipPortal$id4 = tooltipPortal[id]) === null || _tooltipPortal$id4 === void 0 ? void 0 : _tooltipPortal$id4.node;
 
     if (root) {
       return ReactDOM.createPortal(isInDOM.current || keepInDOM ? React.createElement(TooltipContainer, _extends({}, props, {
-        targetElement: getTargetElement(target),
+        targetElement: targetElement,
         active: isActive
       }), children) : null, root);
     }
@@ -146,14 +161,16 @@ var createGroupElement = function createGroupElement(id) {
     var elem = document.createElement('div');
     elem.classList.add('dnb-tooltip__group');
     elem.setAttribute('id', id);
-    createRootElement('dnb-tooltip__portal').appendChild(elem);
+    createRootElement().appendChild(elem);
     return elem;
   } catch (e) {
     warn(e);
   }
 };
 
-var createRootElement = function createRootElement(className) {
+var createRootElement = function createRootElement() {
+  var className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'dnb-tooltip__portal';
+
   try {
     var element = document.querySelector(".".concat(className));
 

package/components/tooltip/TooltipWithEvents.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import { TooltipProps } from './types';
 declare type TooltipWithEventsProps = {
-    target: React.ReactElement & React.RefObject<HTMLElement>;
+    target: HTMLElement | React.ReactElement;
     active: boolean;
     internalId: string;
 };

package/components/tooltip/TooltipWithEvents.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "target"];
+var _excluded = ["children"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -20,15 +20,23 @@ import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
 import React from 'react';
 import { combineDescribedBy, warn } from '../../shared/component-helper';
+import TooltipContainer from './TooltipContainer';
 import { getRefElement, injectTooltipSemantic, isTouch, useHandleAria } from './TooltipHelpers';
 import TooltipPortal from './TooltipPortal';
 
 function TooltipWithEvents(props) {
   var children = props.children,
-      target = props.target,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var _React$useState = React.useState(false),
+  var active = restProps.active,
+      target = restProps.target,
+      skipPortal = restProps.skipPortal,
+      noAnimation = restProps.noAnimation,
+      showDelay = restProps.showDelay,
+      hideDelay = restProps.hideDelay,
+      internalId = restProps.internalId;
+
+  var _React$useState = React.useState(active),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isActive = _React$useState2[0],
       setIsActive = _React$useState2[1];
@@ -38,21 +46,19 @@ function TooltipWithEvents(props) {
       isNotSemanticElement = _React$useState4[0],
       setIsNotSemanticElement = _React$useState4[1];
 
-  var _React$useState5 = React.useState(false),
+  var _React$useState5 = React.useState(!target),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       isMounted = _React$useState6[0],
       setIsMounted = _React$useState6[1];
 
   var onEnterTimeout = React.useRef();
-  var targetRef = React.useRef();
+  var onLeaveTimeout = React.useRef();
   var cloneRef = React.useRef();
-  React.useEffect(function () {
+  var targetRef = React.useRef();
+  React.useLayoutEffect(function () {
     targetRef.current = getRefElement(cloneRef);
-
-    if (!targetRef.current) {
-      targetRef.current = target.current;
-    }
-
+  }, [target]);
+  React.useLayoutEffect(function () {
     if (targetRef.current) {
       setIsMounted(true);
       addEvents(targetRef.current);
@@ -60,28 +66,17 @@ function TooltipWithEvents(props) {
     }
 
     return function () {
-      clearTimeout(onEnterTimeout.current);
-      var element = targetRef.current;
-
-      if (element) {
-        try {
-          element.removeEventListener('click', onMouseLeave);
-          element.removeEventListener('focus', onFocus);
-          element.removeEventListener('blur', onMouseLeave);
-          element.removeEventListener('mouseenter', onMouseEnter);
-          element.removeEventListener('mouseleave', onMouseLeave);
-          element.removeEventListener('touchstart', onMouseEnter);
-          element.removeEventListener('touchend', onMouseLeave);
-        } catch (e) {
-          warn(e);
-        }
+      clearTimers();
+
+      if (targetRef.current) {
+        removeEvents(targetRef.current);
       }
     };
   }, []);
 
   var handleSemanticElement = function handleSemanticElement() {
     try {
-      var targetElement = document.querySelector("*[aria-describedby*=\"".concat(props.internalId, "\"]"));
+      var targetElement = document.querySelector("*[aria-describedby*=\"".concat(internalId, "\"]"));
 
       if (targetElement) {
         var role = targetElement.getAttribute('role');
@@ -110,16 +105,29 @@ function TooltipWithEvents(props) {
     }
   };
 
-  var onFocus = function onFocus(e) {
+  var removeEvents = function removeEvents(element) {
     try {
-      if (document.documentElement.getAttribute('data-whatintent') === 'keyboard') {
-        return onMouseEnter(e);
-      }
+      element.removeEventListener('click', onMouseLeave);
+      element.removeEventListener('focus', onFocus);
+      element.removeEventListener('blur', onMouseLeave);
+      element.removeEventListener('mouseenter', onMouseEnter);
+      element.removeEventListener('mouseleave', onMouseLeave);
+      element.removeEventListener('touchstart', onMouseEnter);
+      element.removeEventListener('touchend', onMouseLeave);
     } catch (e) {
       warn(e);
     }
   };
 
+  var clearTimers = function clearTimers() {
+    clearTimeout(onEnterTimeout.current);
+    clearTimeout(onLeaveTimeout.current);
+  };
+
+  var onFocus = function onFocus(e) {
+    return onMouseEnter(e);
+  };
+
   var onMouseEnter = function onMouseEnter(e) {
     try {
       if (isTouch(e.type)) {
@@ -134,15 +142,19 @@ function TooltipWithEvents(props) {
       setIsActive(true);
     };
 
-    if (props.noAnimation || globalThis.IS_TEST) {
+    if (noAnimation || globalThis.IS_TEST) {
       run();
     } else {
-      clearTimeout(onEnterTimeout.current);
-      onEnterTimeout.current = setTimeout(run, parseFloat(String(props.showDelay)) || 1);
+      clearTimers();
+      onEnterTimeout.current = setTimeout(run, parseFloat(String(showDelay)) || 1);
     }
   };
 
   var onMouseLeave = function onMouseLeave(e) {
+    if (active) {
+      return;
+    }
+
     try {
       if (isTouch(e.type)) {
         var elem = e.currentTarget;
@@ -152,8 +164,17 @@ function TooltipWithEvents(props) {
       warn(e);
     }
 
-    clearTimeout(onEnterTimeout.current);
-    setIsActive(false);
+    clearTimers();
+
+    var run = function run() {
+      setIsActive(false);
+    };
+
+    if (skipPortal) {
+      onLeaveTimeout.current = setTimeout(run, parseFloat(String(hideDelay)));
+    } else {
+      run();
+    }
   };
 
   var componentWrapper = React.useMemo(function () {
@@ -164,19 +185,23 @@ function TooltipWithEvents(props) {
       return React.cloneElement(target, _objectSpread(_objectSpread({
         ref: cloneRef
       }, params), {}, {
-        'aria-describedby': combineDescribedBy(target.props, props.internalId)
+        'aria-describedby': combineDescribedBy(target.props, internalId)
       }));
+    } else {
+      cloneRef.current = target;
     }
 
     return null;
   }, [target]);
-  useHandleAria(target, props.internalId);
-  return React.createElement(React.Fragment, null, componentWrapper, isMounted && React.createElement(TooltipPortal, _extends({
-    key: "tooltip",
+  useHandleAria(targetRef.current, internalId);
+  return React.createElement(React.Fragment, null, isMounted && (skipPortal ? React.createElement(TooltipContainer, _extends({}, restProps, {
+    active: isActive,
+    targetElement: targetRef.current
+  }), children) : React.createElement(TooltipPortal, _extends({}, restProps, {
     active: isActive,
-    target: targetRef.current,
+    targetElement: targetRef.current,
     keepInDOM: true
-  }, restProps), children));
+  }), children)), componentWrapper);
 }
 
 export default TooltipWithEvents;

package/components/tooltip/types.d.ts

@@ -24,5 +24,6 @@ export declare type TooltipProps = IncludeSnakeCase<{
     tooltip?: React.ReactNode;
     className?: string;
     children?: React.ReactNode;
+    style?: React.CSSProperties;
 }>;
 export declare type TooltipAllProps = TooltipProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, keyof TooltipProps>;