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();