diff --git a/packages/@mantine/core/src/components/Tooltip/Tooltip.story.tsx b/packages/@mantine/core/src/components/Tooltip/Tooltip.story.tsx index 7b670c1fe03..0aa57940e85 100644 --- a/packages/@mantine/core/src/components/Tooltip/Tooltip.story.tsx +++ b/packages/@mantine/core/src/components/Tooltip/Tooltip.story.tsx @@ -205,3 +205,21 @@ export function Inline() { ); } + +export function DefaultOpened() { + return ( +
+ + + +
+ ); +} diff --git a/packages/@mantine/core/src/components/Tooltip/Tooltip.test.tsx b/packages/@mantine/core/src/components/Tooltip/Tooltip.test.tsx index 8e2aed43d1d..563033c87f3 100644 --- a/packages/@mantine/core/src/components/Tooltip/Tooltip.test.tsx +++ b/packages/@mantine/core/src/components/Tooltip/Tooltip.test.tsx @@ -73,4 +73,14 @@ describe('@mantine/core/Tooltip', () => { expect(Tooltip.Floating).toBe(TooltipFloating); expect(Tooltip.Group).toBe(TooltipGroup); }); + + it('shows tooltip by default', () => { + render( + + + + ); + + expect(screen.getByText('test-tooltip')).toBeInTheDocument(); + }); }); diff --git a/packages/@mantine/core/src/components/Tooltip/Tooltip.tsx b/packages/@mantine/core/src/components/Tooltip/Tooltip.tsx index 300b4eb582d..4a2a5847a07 100644 --- a/packages/@mantine/core/src/components/Tooltip/Tooltip.tsx +++ b/packages/@mantine/core/src/components/Tooltip/Tooltip.tsx @@ -43,6 +43,9 @@ export interface TooltipProps extends TooltipBaseProps { /** Controlled opened state */ opened?: boolean; + /** Uncontrolled tooltip initial opened state */ + defaultOpened?: boolean; + /** Space between target element and tooltip in px, `5` by default */ offset?: number | FloatingAxesOffsets; @@ -96,6 +99,7 @@ const defaultProps: Partial = { refProp: 'ref', withinPortal: true, inline: false, + defaultOpened: false, arrowSize: 4, arrowOffset: 5, arrowRadius: 0, @@ -126,6 +130,7 @@ export const Tooltip = factory((_props, ref) => { closeDelay, onPositionChange, opened, + defaultOpened, withinPortal, radius, color, @@ -167,6 +172,7 @@ export const Tooltip = factory((_props, ref) => { openDelay, onPositionChange, opened, + defaultOpened, events, arrowRef, arrowOffset, diff --git a/packages/@mantine/core/src/components/Tooltip/TooltipFloating/TooltipFloating.tsx b/packages/@mantine/core/src/components/Tooltip/TooltipFloating/TooltipFloating.tsx index ab17b2df96d..9b2330e03f3 100644 --- a/packages/@mantine/core/src/components/Tooltip/TooltipFloating/TooltipFloating.tsx +++ b/packages/@mantine/core/src/components/Tooltip/TooltipFloating/TooltipFloating.tsx @@ -22,6 +22,8 @@ import classes from '../Tooltip.module.css'; export interface TooltipFloatingProps extends TooltipBaseProps { /** Offset from mouse in px, `10` by default */ offset?: number; + /** Uncontrolled tooltip initial opened state */ + defaultOpened?: boolean; } export type TooltipFloatingFactory = Factory<{ @@ -35,6 +37,7 @@ const defaultProps: Partial = { refProp: 'ref', withinPortal: true, offset: 10, + defaultOpened: false, position: 'right', zIndex: getDefaultZIndex('popover'), }; @@ -66,6 +69,7 @@ export const TooltipFloating = factory((_props, ref) => multiline, zIndex, disabled, + defaultOpened, variant, vars, portalProps, @@ -90,6 +94,7 @@ export const TooltipFloating = factory((_props, ref) => const { handleMouseMove, x, y, opened, boundaryRef, floating, setOpened } = useFloatingTooltip({ offset: offset!, position: position!, + defaultOpened: defaultOpened!, }); if (!isElement(children)) { diff --git a/packages/@mantine/core/src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts b/packages/@mantine/core/src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts index 27cc3dac52a..5704da8c53c 100644 --- a/packages/@mantine/core/src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts +++ b/packages/@mantine/core/src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts @@ -5,13 +5,15 @@ import { FloatingPosition } from '../../Floating'; interface UseFloatingTooltip { offset: number; position: FloatingPosition; + defaultOpened?: boolean; } export function useFloatingTooltip({ offset, position, + defaultOpened, }: UseFloatingTooltip) { - const [opened, setOpened] = useState(false); + const [opened, setOpened] = useState(defaultOpened); const boundaryRef = useRef(); const { x, y, elements, refs, update, placement } = useFloating({ placement: position, diff --git a/packages/@mantine/core/src/components/Tooltip/use-tooltip.ts b/packages/@mantine/core/src/components/Tooltip/use-tooltip.ts index b2dd63f351d..44c7f62731a 100644 --- a/packages/@mantine/core/src/components/Tooltip/use-tooltip.ts +++ b/packages/@mantine/core/src/components/Tooltip/use-tooltip.ts @@ -29,6 +29,7 @@ interface UseTooltip { openDelay?: number; onPositionChange?: (position: FloatingPosition) => void; opened?: boolean; + defaultOpened?: boolean; offset: number | FloatingAxesOffsets; arrowRef?: React.RefObject; arrowOffset?: number; @@ -39,7 +40,7 @@ interface UseTooltip { } export function useTooltip(settings: UseTooltip) { - const [uncontrolledOpened, setUncontrolledOpened] = useState(false); + const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened); const controlled = typeof settings.opened === 'boolean'; const opened = controlled ? settings.opened : uncontrolledOpened; const withinGroup = useTooltipGroupContext();