From 0073ef15037276a38ba6eeb9a11f8ee86fc2184a Mon Sep 17 00:00:00 2001 From: Vitaly Rtishchev Date: Sun, 2 Oct 2022 11:42:58 +0400 Subject: [PATCH] [@mantine/core] Tooltip: Add inline prop support (#2500) --- docs/src/docs/changelog/5-5-0.mdx | 15 ++++++- docs/src/docs/core/Tooltip.mdx | 6 +++ .../src/Tooltip/Tooltip.story.tsx | 14 ++++++ src/mantine-core/src/Tooltip/Tooltip.tsx | 6 +++ src/mantine-core/src/Tooltip/use-tooltip.ts | 7 +-- .../core/Tooltip/Tooltip.demo.inline.tsx | 45 +++++++++++++++++++ .../src/demos/core/Tooltip/index.ts | 1 + 7 files changed, 90 insertions(+), 4 deletions(-) create mode 100644 src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.inline.tsx diff --git a/docs/src/docs/changelog/5-5-0.mdx b/docs/src/docs/changelog/5-5-0.mdx index 64a4f3cb360..78ea148c641 100644 --- a/docs/src/docs/changelog/5-5-0.mdx +++ b/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: +## 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: + + + ## Autosize Modal [Modal](https://mantine.dev/core/modal/) component now supports `size="auto"`: diff --git a/docs/src/docs/core/Tooltip.mdx b/docs/src/docs/core/Tooltip.mdx index 6d229966a6a..0eb2277ae15 100644 --- a/docs/src/docs/core/Tooltip.mdx +++ b/docs/src/docs/core/Tooltip.mdx @@ -147,6 +147,12 @@ To enable multiline mode set `multiline` prop to enable line breaks and `width` +## Inline + +Set `inline` prop to use `Tooltip` with inline elements: + + + ## Change transition Tooltip is built with [Transition](/core/transition/) component, it supports `transition` and `transitionDuration` props: diff --git a/src/mantine-core/src/Tooltip/Tooltip.story.tsx b/src/mantine-core/src/Tooltip/Tooltip.story.tsx index 503f56f296b..312282ba403 100644 --- a/src/mantine-core/src/Tooltip/Tooltip.story.tsx +++ b/src/mantine-core/src/Tooltip/Tooltip.story.tsx @@ -101,3 +101,17 @@ export const WithArrow = () => ( ); + +export function Inline() { + return ( +
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae ipsam in quos aperiam magni + quas neque{' '} + + aliquid laboriosam dolorum + + , eum voluptate, perferendis placeat repudiandae nesciunt explicabo quibusdam deserunt, animi + dicta. +
+ ); +} diff --git a/src/mantine-core/src/Tooltip/Tooltip.tsx b/src/mantine-core/src/Tooltip/Tooltip.tsx index ee3116efdf2..781d9436af2 100644 --- a/src/mantine-core/src/Tooltip/Tooltip.tsx +++ b/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 = { position: 'top', refProp: 'ref', withinPortal: false, + inline: false, arrowSize: 4, arrowOffset: 5, offset: 5, @@ -100,6 +104,7 @@ const _Tooltip = forwardRef((props, ref) => { onClick, onMouseEnter, onMouseLeave, + inline, ...others } = useComponentDefaultProps('Tooltip', defaultProps, props); @@ -118,6 +123,7 @@ const _Tooltip = forwardRef((props, ref) => { arrowRef, offset: offset + (withArrow ? arrowSize / 2 : 0), positionDependencies: [...positionDependencies, children], + inline, }); if (!isElement(children)) { diff --git a/src/mantine-core/src/Tooltip/use-tooltip.ts b/src/mantine-core/src/Tooltip/use-tooltip.ts index b4539985f2c..d8ccc75f18a 100644 --- a/src/mantine-core/src/Tooltip/use-tooltip.ts +++ b/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; 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()] : []), ], }); diff --git a/src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.inline.tsx b/src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.inline.tsx new file mode 100644 index 00000000000..15f2c5cb064 --- /dev/null +++ b/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 ( + + 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.{' '} + + When visiting a junkyard + + , 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. + + ); +} +`; + +function Demo() { + return ( + + 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.{' '} + + When visiting a junkyard + + , 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. + + ); +} + +export const inline: MantineDemo = { + type: 'demo', + component: Demo, + code, +}; diff --git a/src/mantine-demos/src/demos/core/Tooltip/index.ts b/src/mantine-demos/src/demos/core/Tooltip/index.ts index a06e6be8602..63e27b2e7af 100644 --- a/src/mantine-demos/src/demos/core/Tooltip/index.ts +++ b/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';