diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 16ece8277a..a012e94204 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -126,4 +126,8 @@ const Tooltip = React.forwardRef( 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 index 11d0d7198f..1821b59fdb 100644 --- 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, Options['modifiers']] { const overlayRef = useRef(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 index 32f6d300cb..6d9723f073 100644 --- 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(); 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(); 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', () => {