[@mantine/core] Tooltip: Add defaultOpened prop support (#6466)

* Added defaultOpened prop on tooltip * Fixed preetier warnings
mantinedev · Jul 2, 2024 · 508991c · 508991c
1 parent adadb00
commit 508991c
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 2 deletions.
diff --git 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() {
     </div>
   );
 }
+
+export function DefaultOpened() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Tooltip
+        position="right"
+        label="Tooltip visible by default"
+        withArrow
+        transitionProps={{ duration: 0 }}
+        color="cyan"
+        radius="md"
+        defaultOpened
+      >
+        <button type="button">target</button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/packages/@mantine/core/src/components/Tooltip/Tooltip.test.tsx b/packages/@mantine/core/src/components/Tooltip/Tooltip.test.tsx
@@ -74,4 +74,14 @@ describe('@mantine/core/Tooltip', () => {
     expect(Tooltip.Floating).toBe(TooltipFloating);
     expect(Tooltip.Group).toBe(TooltipGroup);
   });
+
+  it('shows tooltip by default', () => {
+    render(
+      <Tooltip label="test-tooltip" defaultOpened transitionProps={{ duration: 0 }}>
+        <button type="button">target</button>
+      </Tooltip>
+    );
+
+    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
@@ -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<TooltipProps> = {
   refProp: 'ref',
   withinPortal: true,
   inline: false,
+  defaultOpened: false,
   arrowSize: 4,
   arrowOffset: 5,
   arrowRadius: 0,
@@ -126,6 +130,7 @@ export const Tooltip = factory<TooltipFactory>((_props, ref) => {
     closeDelay,
     onPositionChange,
     opened,
+    defaultOpened,
     withinPortal,
     radius,
     color,
@@ -167,6 +172,7 @@ export const Tooltip = factory<TooltipFactory>((_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
@@ -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<TooltipFloatingProps> = {
   refProp: 'ref',
   withinPortal: true,
   offset: 10,
+  defaultOpened: false,
   position: 'right',
   zIndex: getDefaultZIndex('popover'),
 };
@@ -66,6 +69,7 @@ export const TooltipFloating = factory<TooltipFloatingFactory>((_props, ref) =>
     multiline,
     zIndex,
     disabled,
+    defaultOpened,
     variant,
     vars,
     portalProps,
@@ -90,6 +94,7 @@ export const TooltipFloating = factory<TooltipFloatingFactory>((_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
@@ -5,13 +5,15 @@ import { FloatingPosition } from '../../Floating';
 interface UseFloatingTooltip {
   offset: number;
   position: FloatingPosition;
+  defaultOpened?: boolean;
 }
 
 export function useFloatingTooltip<T extends HTMLElement = any>({
   offset,
   position,
+  defaultOpened,
 }: UseFloatingTooltip) {
-  const [opened, setOpened] = useState(false);
+  const [opened, setOpened] = useState(defaultOpened);
   const boundaryRef = useRef<T>();
   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
@@ -29,6 +29,7 @@ interface UseTooltip {
   openDelay?: number;
   onPositionChange?: (position: FloatingPosition) => void;
   opened?: boolean;
+  defaultOpened?: boolean;
   offset: number | FloatingAxesOffsets;
   arrowRef?: React.RefObject<HTMLDivElement>;
   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();