fix(Tooltip): fix offset (#6622)

react-bootstrap · Jun 4, 2023 · 3c094ec · 3c094ec
1 parent 5dca570
commit 3c094ec
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
@@ -126,4 +126,8 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
 Tooltip.propTypes = propTypes as any;
 Tooltip.displayName = 'Tooltip';
 
-export default Tooltip;
+export default Object.assign(Tooltip, {
+  // Default tooltip offset.
+  // https://github.com/twbs/bootstrap/blob/beca2a6c7f6bc88b6449339fc76edcda832c59e5/js/src/tooltip.js#L65
+  TOOLTIP_OFFSET: [0, 6],
+});
diff --git a/src/useOverlayOffset.tsx b/src/useOverlayOffset.tsx
@@ -3,31 +3,40 @@ import hasClass from 'dom-helpers/hasClass';
 import { Offset, Options } from '@restart/ui/usePopper';
 import { useBootstrapPrefix } from './ThemeProvider';
 import Popover from './Popover';
+import Tooltip from './Tooltip';
 
 // This is meant for internal use.
-// This applies a custom offset to the overlay if it's a popover.
+// This applies a custom offset to the overlay if it's a popover or tooltip.
 export default function useOverlayOffset(
   customOffset?: Offset,
 ): [React.RefObject<HTMLElement>, Options['modifiers']] {
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const popoverClass = useBootstrapPrefix(undefined, 'popover');
+  const tooltipClass = useBootstrapPrefix(undefined, 'tooltip');
 
   const offset = useMemo(
     () => ({
       name: 'offset',
       options: {
         offset: () => {
-          if (
-            overlayRef.current &&
-            hasClass(overlayRef.current, popoverClass)
-          ) {
-            return customOffset || Popover.POPPER_OFFSET;
+          if (customOffset) {
+            return customOffset;
           }
-          return customOffset || [0, 0];
+
+          if (overlayRef.current) {
+            if (hasClass(overlayRef.current, popoverClass)) {
+              return Popover.POPPER_OFFSET;
+            }
+
+            if (hasClass(overlayRef.current, tooltipClass)) {
+              return Tooltip.TOOLTIP_OFFSET;
+            }
+          }
+          return [0, 0];
         },
       },
     }),
-    [customOffset, popoverClass],
+    [customOffset, popoverClass, tooltipClass],
   );
 
   return [overlayRef, [offset]];

diff --git a/test/useOverlayOffsetSpec.tsx b/test/useOverlayOffsetSpec.tsx
@@ -25,7 +25,7 @@ describe('useOverlayOffset', () => {
     });
   });
 
-  it('should have offset of [0s, 8] for Popovers', () => {
+  it('should have offset of [0, 8] for Popovers', () => {
     const ref = React.createRef<any>();
 
     render(
@@ -51,7 +51,7 @@ describe('useOverlayOffset', () => {
     expect(offset).to.eql([200, 200]);
   });
 
-  it('should have offset of [0, 0] for Tooltips', () => {
+  it('should have offset of [0, 6] for Tooltips', () => {
     const ref = React.createRef<any>();
 
     mount(
@@ -61,7 +61,7 @@ describe('useOverlayOffset', () => {
     );
 
     const offset = ref.current.modifiers[0].options.offset();
-    expect(offset).to.eql([0, 0]);
+    expect(offset).to.eql([0, 6]);
   });
 
   it('should have offset of [0, 0] for any overlay', () => {