[@mantine/core] Tooltip: Add inline prop support (#2500)

docs/src/docs/changelog/5-5-0.mdx

@@ -7,7 +7,13 @@ release: https://github.com/mantinedev/mantine/releases/tag/5.5.0
 date: 'October 3rd, 2022'
 ---
 
-import { CollapseDemos, SliderDemos, CheckboxDemos, ModalDemos } from '@mantine/demos';
+import {
+  CollapseDemos,
+  SliderDemos,
+  CheckboxDemos,
+  ModalDemos,
+  TooltipDemos,
+} from '@mantine/demos';
 
 ## Global styles on theme
 
@@ -68,6 +74,13 @@ components now support `error`, `description` and `labelPosition` props:
 
 <Demo data={SliderDemos.inverted} />
 
+## Inline tooltips
+
+[Tooltip](https://mantine.dev/core/tooltip/) component now supports `inline` prop that makes is possible
+to position tooltip correctly when inline element is a target:
+
+<Demo data={TooltipDemos.inline} />
+
 ## Autosize Modal
 
 [Modal](https://mantine.dev/core/modal/) component now supports `size="auto"`:

docs/src/docs/core/Tooltip.mdx

@@ -147,6 +147,12 @@ To enable multiline mode set `multiline` prop to enable line breaks and `width`
 
 <Demo data={TooltipDemos.multiline} />
 
+## Inline
+
+Set `inline` prop to use `Tooltip` with inline elements:
+
+<Demo data={TooltipDemos.inline} />
+
 ## Change transition
 
 Tooltip is built with [Transition](/core/transition/) component, it supports `transition` and `transitionDuration` props:

src/mantine-core/src/Tooltip/Tooltip.story.tsx

@@ -101,3 +101,17 @@ export const WithArrow = () => (
     <Button type="button">Tooltip button with arrow</Button>
   </Tooltip>
 );
+
+export function Inline() {
+  return (
+    <div style={{ padding: 40, maxWidth: 400 }}>
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae ipsam in quos aperiam magni
+      quas neque{' '}
+      <Tooltip label="Inline tooltip" inline>
+        <span style={{ background: 'pink' }}>aliquid laboriosam dolorum</span>
+      </Tooltip>
+      , eum voluptate, perferendis placeat repudiandae nesciunt explicabo quibusdam deserunt, animi
+      dicta.
+    </div>
+  );
+}

src/mantine-core/src/Tooltip/Tooltip.tsx

@@ -49,12 +49,16 @@ export interface TooltipProps extends TooltipBaseProps {
 
   /** useEffect dependencies to force update tooltip position */
   positionDependencies?: any[];
+
+  /** Set if tooltip is attached to an inline element */
+  inline?: boolean;
 }
 
 const defaultProps: Partial<TooltipProps> = {
   position: 'top',
   refProp: 'ref',
   withinPortal: false,
+  inline: false,
   arrowSize: 4,
   arrowOffset: 5,
   offset: 5,
@@ -100,6 +104,7 @@ const _Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
     onClick,
     onMouseEnter,
     onMouseLeave,
+    inline,
     ...others
   } = useComponentDefaultProps('Tooltip', defaultProps, props);
 
@@ -118,6 +123,7 @@ const _Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
     arrowRef,
     offset: offset + (withArrow ? arrowSize / 2 : 0),
     positionDependencies: [...positionDependencies, children],
+    inline,
   });
 
   if (!isElement(children)) {

src/mantine-core/src/Tooltip/use-tooltip.ts

@@ -12,6 +12,7 @@ import {
   useDismiss,
   useDelayGroupContext,
   useDelayGroup,
+  inline,
 } from '@floating-ui/react-dom-interactions';
 import { useId, useDidUpdate } from '@mantine/hooks';
 import { useTooltipGroupContext } from './TooltipGroup/TooltipGroup.context';
@@ -27,6 +28,7 @@ interface UseTooltip {
   arrowRef?: React.RefObject<HTMLDivElement>;
   events: { hover: boolean; focus: boolean; touch: boolean };
   positionDependencies: any[];
+  inline: boolean;
 }
 
 export function useTooltip(settings: UseTooltip) {
@@ -67,9 +69,8 @@ export function useTooltip(settings: UseTooltip) {
       offset(settings.offset),
       shift({ padding: 8 }),
       flip(),
-      arrow({
-        element: settings.arrowRef,
-      }),
+      arrow({ element: settings.arrowRef }),
+      ...(settings.inline ? [inline()] : []),
     ],
   });
 

src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.inline.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { MantineDemo } from '@mantine/ds';
+import { Tooltip, Mark, Text } from '@mantine/core';
+
+const code = `
+import { Tooltip, Mark, Text } from '@mantine/core';
+
+function Demo() {
+  return (
+    <Text>
+      Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this
+      Pokémon was hunted close to extinction by those who were after the priceless antlers.{' '}
+      <Tooltip inline label="Inline tooltip">
+        <Mark>When visiting a junkyard</Mark>
+      </Tooltip>
+      , you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s
+      feathers glow in seven colors depending on the angle at which they are struck by light. These
+      feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot
+      of a rainbow.
+    </Text>
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <Text>
+      Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this
+      Pokémon was hunted close to extinction by those who were after the priceless antlers.{' '}
+      <Tooltip inline label="Inline tooltip">
+        <Mark>When visiting a junkyard</Mark>
+      </Tooltip>
+      , you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s
+      feathers glow in seven colors depending on the angle at which they are struck by light. These
+      feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot
+      of a rainbow.
+    </Text>
+  );
+}
+
+export const inline: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};

src/mantine-demos/src/demos/core/Tooltip/index.ts

@@ -8,3 +8,4 @@ export { floating } from './Tooltip.demo.floating';
 export { usage } from './Tooltip.demo.usage';
 export { group } from './Tooltip.demo.group';
 export { offset } from './Tooltip.demo.offset';
+export { inline } from './Tooltip.demo.inline';