Skip to content

Commit 6017c71

Browse files
tanerengiiintanerengiiin
committed
feat(tooltip): remake Tooltip with Positioner in new structure
1 parent fa57356 commit 6017c71

60 files changed

Lines changed: 1270 additions & 1224 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/__store__/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2173,6 +2173,10 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
21732173
'component': React.lazy(() => import('demo/styled/tooltip/basic-demo')),
21742174
'filePath': 'demo/styled/tooltip/basic-demo.tsx',
21752175
},
2176+
'controlled-demo': {
2177+
'component': React.lazy(() => import('demo/styled/tooltip/controlled-demo')),
2178+
'filePath': 'demo/styled/tooltip/controlled-demo.tsx',
2179+
},
21762180
'delay-demo': {
21772181
'component': React.lazy(() => import('demo/styled/tooltip/delay-demo')),
21782182
'filePath': 'demo/styled/tooltip/delay-demo.tsx',

‎apps/showcase/demo/styled/speeddial/tooltip-demo.tsx‎

Lines changed: 42 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1-
import { SpeedDial } from '@primereact/ui/speeddial';
2-
import { Tooltip } from '@primereact/ui/tooltip';
31
import { Plus } from '@primeicons/react/plus';
4-
import { Pencil } from '@primeicons/react/pencil';
5-
import { Refresh } from '@primeicons/react/refresh';
6-
import { Trash } from '@primeicons/react/trash';
7-
import { Upload } from '@primeicons/react/upload';
8-
import { ExternalLink } from '@primeicons/react/external-link';
2+
import { SpeedDial } from '@primereact/ui/speeddial';
93

104
export default function TooltipDemo() {
11-
const items = [
12-
{ icon: Pencil, label: 'Add' },
13-
{ icon: Refresh, label: 'Update' },
14-
{ icon: Trash, label: 'Delete' },
15-
{ icon: Upload, label: 'Upload' },
16-
{ icon: ExternalLink, label: 'External' }
17-
];
5+
// const items = [
6+
// { icon: Pencil, label: 'Add' },
7+
// { icon: Refresh, label: 'Update' },
8+
// { icon: Trash, label: 'Delete' },
9+
// { icon: Upload, label: 'Upload' },
10+
// { icon: ExternalLink, label: 'External' }
11+
// ];
1812

1913
return (
2014
<div>
@@ -24,55 +18,51 @@ export default function TooltipDemo() {
2418
<Plus />
2519
</SpeedDial.Trigger>
2620
<SpeedDial.List>
27-
<Tooltip.Group>
28-
{items.map((action) => {
29-
const Icon = action.icon;
30-
31-
return (
32-
<Tooltip.Root key={action.label} side="left">
33-
<Tooltip.Trigger as={SpeedDial.Item}>
34-
<SpeedDial.Action>
35-
<Icon />
36-
</SpeedDial.Action>
37-
</Tooltip.Trigger>
38-
<Tooltip.Portal>
39-
<Tooltip.Content>
21+
{/* <Tooltip.Manager>
22+
{items.map((action) => (
23+
<Tooltip.Root key={action.label} side="left">
24+
<Tooltip.Trigger as={SpeedDial.Item}>
25+
<SpeedDial.Action>
26+
<action.icon />
27+
</SpeedDial.Action>
28+
</Tooltip.Trigger>
29+
<Tooltip.Portal>
30+
<Tooltip.Positioner>
31+
<Tooltip.Popup>
4032
<p>{action.label}</p>
4133
<Tooltip.Arrow />
42-
</Tooltip.Content>
43-
</Tooltip.Portal>
44-
</Tooltip.Root>
45-
);
46-
})}
47-
</Tooltip.Group>
34+
</Tooltip.Popup>
35+
</Tooltip.Positioner>
36+
</Tooltip.Portal>
37+
</Tooltip.Root>
38+
))}
39+
</Tooltip.Manager> */}
4840
</SpeedDial.List>
4941
</SpeedDial.Root>
5042
<SpeedDial.Root direction="up" style={{ position: 'absolute', left: 0, bottom: 0 }}>
5143
<SpeedDial.Trigger severity="danger" className="transition-transform duration-200 data-open:rotate-45">
5244
<Plus />
5345
</SpeedDial.Trigger>
5446
<SpeedDial.List>
55-
<Tooltip.Group>
56-
{items.map((action) => {
57-
const Icon = action.icon;
58-
59-
return (
60-
<Tooltip.Root key={action.label} side="right">
61-
<Tooltip.Trigger as={SpeedDial.Item}>
62-
<SpeedDial.Action>
63-
<Icon />
64-
</SpeedDial.Action>
65-
</Tooltip.Trigger>
66-
<Tooltip.Portal>
67-
<Tooltip.Content>
47+
{/* <Tooltip.Manager>
48+
{items.map((action) => (
49+
<Tooltip.Root key={action.label} side="right">
50+
<Tooltip.Trigger as={SpeedDial.Item}>
51+
<SpeedDial.Action>
52+
<action.icon />
53+
</SpeedDial.Action>
54+
</Tooltip.Trigger>
55+
<Tooltip.Portal>
56+
<Tooltip.Positioner>
57+
<Tooltip.Popup>
6858
<p>{action.label}</p>
6959
<Tooltip.Arrow />
70-
</Tooltip.Content>
71-
</Tooltip.Portal>
72-
</Tooltip.Root>
73-
);
74-
})}
75-
</Tooltip.Group>
60+
</Tooltip.Popup>
61+
</Tooltip.Positioner>
62+
</Tooltip.Portal>
63+
</Tooltip.Root>
64+
))}
65+
</Tooltip.Manager> */}
7666
</SpeedDial.List>
7767
</SpeedDial.Root>
7868
</div>

‎apps/showcase/demo/styled/tooltip/arrow-demo.tsx‎

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,43 @@
1-
import { Button } from '@primereact/ui/button';
21
import { Tooltip } from '@primereact/ui/tooltip';
32

43
export default function ArrowDemo() {
54
return (
6-
<div className="flex items-center justify-center gap-6">
7-
<Tooltip.Root>
8-
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
9-
Show Tooltip
10-
</Tooltip.Trigger>
11-
<Tooltip.Portal>
12-
<Tooltip.Content>
13-
<p>Tooltip with arrow</p>
14-
<Tooltip.Arrow />
15-
</Tooltip.Content>
16-
</Tooltip.Portal>
17-
</Tooltip.Root>
18-
<Tooltip.Root>
19-
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
20-
Show Tooltip
21-
</Tooltip.Trigger>
22-
<Tooltip.Portal>
23-
<Tooltip.Content>
24-
<p>Tooltip without arrow</p>
25-
</Tooltip.Content>
26-
</Tooltip.Portal>
27-
</Tooltip.Root>
5+
<div className="flex items-center justify-center gap-4">
6+
<Tooltip.Manager>
7+
<Tooltip.Root>
8+
<Tooltip.Trigger className="h-8 px-2.5 rounded-md border border-surface flex items-center justify-center gap-2 bg-surface-0 dark:bg-surface-950 hover:bg-surface-100 dark:hover:bg-surface-900 data-open:bg-surface-100 dark:data-open:bg-surface-900 transition-colors text-sm font-medium">
9+
With Arrow
10+
</Tooltip.Trigger>
11+
<Tooltip.Portal>
12+
<Tooltip.Positioner sideOffset={8}>
13+
<Tooltip.Popup className="w-60 p-2.5">
14+
<Tooltip.Arrow />
15+
<span className="font-semibold text-surface-0 dark:text-surface-950 text-sm block">Quick Tip</span>
16+
<span className="text-surface-0 dark:text-surface-950 opacity-60 text-sm block mt-1">
17+
You can use tooltips to display helpful information on hover.
18+
</span>
19+
</Tooltip.Popup>
20+
</Tooltip.Positioner>
21+
</Tooltip.Portal>
22+
</Tooltip.Root>
23+
</Tooltip.Manager>
24+
<Tooltip.Manager>
25+
<Tooltip.Root>
26+
<Tooltip.Trigger className="h-8 px-2.5 rounded-md border border-surface flex items-center justify-center gap-2 bg-surface-0 dark:bg-surface-950 hover:bg-surface-100 dark:hover:bg-surface-900 data-open:bg-surface-100 dark:data-open:bg-surface-900 transition-colors text-sm font-medium">
27+
No Arrow
28+
</Tooltip.Trigger>
29+
<Tooltip.Portal>
30+
<Tooltip.Positioner sideOffset={8}>
31+
<Tooltip.Popup className="w-60 p-2.5">
32+
<span className="font-semibold text-surface-0 dark:text-surface-950 text-sm block">Quick Tip</span>
33+
<span className="text-surface-0 dark:text-surface-950 opacity-60 text-sm block mt-1">
34+
You can use tooltips to display helpful information on hover.
35+
</span>
36+
</Tooltip.Popup>
37+
</Tooltip.Positioner>
38+
</Tooltip.Portal>
39+
</Tooltip.Root>
40+
</Tooltip.Manager>
2841
</div>
2942
);
3043
}

‎apps/showcase/demo/styled/tooltip/basic-demo.tsx‎

Lines changed: 71 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,78 @@
1-
import { Button } from '@primereact/ui/button';
1+
import { ChevronRight, QuestionCircle } from '@primeicons/react';
22
import { Tooltip } from '@primereact/ui/tooltip';
33

44
export default function BasicDemo() {
55
return (
6-
<div className="flex items-center justify-center gap-6">
7-
<Tooltip.Root>
8-
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
9-
Show Tooltip
10-
</Tooltip.Trigger>
11-
<Tooltip.Portal>
12-
<Tooltip.Content>
13-
<p>Tooltip</p>
14-
<Tooltip.Arrow />
15-
</Tooltip.Content>
16-
</Tooltip.Portal>
17-
</Tooltip.Root>
6+
<div className="flex flex-wrap items-center justify-center gap-2">
7+
<Tooltip.Manager>
8+
<div className="flex justify-center w-fit text-sm font-medium border border-surface rounded-lg h-8 divide-x divide-(--p-content-border-color) [&>*:first-child]:rounded-l-lg [&>*:last-child]:rounded-r-lg">
9+
<Tooltip.Root>
10+
<Tooltip.Trigger className="px-2.5 flex items-center justify-center cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-900">
11+
IST <ChevronRight className="size-3 mx-1 opacity-50" /> LHR
12+
</Tooltip.Trigger>
13+
<Tooltip.Portal>
14+
<Tooltip.Positioner sideOffset={8}>
15+
<Tooltip.Popup className="flex gap-1">
16+
<Tooltip.Arrow />
17+
Turkish Airlines{' '}
18+
<span className="-mr-1 flex items-center justify-center leading-none px-1.5 rounded-sm bg-green-600 text-green-50 text-xs font-medium font-mono">
19+
ON TIME
20+
</span>
21+
</Tooltip.Popup>
22+
</Tooltip.Positioner>
23+
</Tooltip.Portal>
24+
</Tooltip.Root>
25+
26+
<Tooltip.Root>
27+
<Tooltip.Trigger className="px-2.5 flex items-center justify-center cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-900">
28+
IST <ChevronRight className="size-3 mx-1 opacity-50" /> CDG
29+
</Tooltip.Trigger>
30+
<Tooltip.Portal>
31+
<Tooltip.Positioner sideOffset={8}>
32+
<Tooltip.Popup className="flex gap-1">
33+
<Tooltip.Arrow />
34+
Lufthansa{' '}
35+
<span className="-mr-1 flex items-center justify-center leading-none px-1.5 rounded-sm bg-sky-600 text-sky-50 text-xs font-medium font-mono">
36+
DELAYED
37+
</span>
38+
</Tooltip.Popup>
39+
</Tooltip.Positioner>
40+
</Tooltip.Portal>
41+
</Tooltip.Root>
42+
43+
<Tooltip.Root>
44+
<Tooltip.Trigger className="px-2.5 flex items-center justify-center cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-900">
45+
IST <ChevronRight className="size-3 mx-1 opacity-50" /> FRA
46+
</Tooltip.Trigger>
47+
<Tooltip.Portal>
48+
<Tooltip.Positioner sideOffset={8}>
49+
<Tooltip.Popup className="flex gap-1">
50+
<Tooltip.Arrow />
51+
Qatar Airways{' '}
52+
<span className="-mr-1 flex items-center justify-center leading-none tracking-tighter px-1.5 rounded-sm bg-amber-600 text-amber-50 text-xs font-medium font-mono">
53+
BOARDING
54+
</span>
55+
</Tooltip.Popup>
56+
</Tooltip.Positioner>
57+
</Tooltip.Portal>
58+
</Tooltip.Root>
59+
</div>
60+
</Tooltip.Manager>
61+
<Tooltip.Manager>
62+
<Tooltip.Root>
63+
<Tooltip.Trigger className="flex items-center justify-center size-8 rounded-md border border-surface-200 dark:border-surface-800 hover:bg-surface-50 dark:hover:bg-surface-900">
64+
<QuestionCircle />
65+
</Tooltip.Trigger>
66+
<Tooltip.Portal>
67+
<Tooltip.Positioner sideOffset={8}>
68+
<Tooltip.Popup className="w-56">
69+
<Tooltip.Arrow />
70+
Hover or focus on the flight information to see the status.
71+
</Tooltip.Popup>
72+
</Tooltip.Positioner>
73+
</Tooltip.Portal>
74+
</Tooltip.Root>
75+
</Tooltip.Manager>
1876
</div>
1977
);
2078
}

‎apps/showcase/demo/styled/tooltip/controlled-demo.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
'use client';
2+
import { TooltipRootChangeEvent } from '@primereact/types/shared/tooltip';
3+
import { Tooltip } from '@primereact/ui/tooltip';
4+
import * as React from 'react';
5+
6+
export default function ControlledDemo() {
7+
const [open, setOpen] = React.useState(false);
8+
9+
return (
10+
<div className="flex items-center justify-center gap-4">
11+
<Tooltip.Manager>
12+
<Tooltip.Root open={open} onOpenChange={(e: TooltipRootChangeEvent) => setOpen(e.open || false)}>
13+
<Tooltip.Trigger className="h-8 px-2.5 rounded-md border border-surface flex items-center justify-center gap-2 bg-surface-0 dark:bg-surface-950 hover:bg-surface-100 dark:hover:bg-surface-900 data-open:bg-surface-100 dark:data-open:bg-surface-900 transition-colors text-sm font-medium">
14+
Tooltip is {open ? 'open' : 'close'}
15+
</Tooltip.Trigger>
16+
<Tooltip.Portal>
17+
<Tooltip.Positioner sideOffset={8}>
18+
<Tooltip.Popup className="w-60 p-2.5">
19+
<Tooltip.Arrow />
20+
<span className="font-semibold text-surface-0 dark:text-surface-950 text-sm block">Quick Tip</span>
21+
<span className="text-surface-0 dark:text-surface-950 opacity-60 text-sm block mt-1">
22+
You can use tooltips to display helpful information on hover.
23+
</span>
24+
</Tooltip.Popup>
25+
</Tooltip.Positioner>
26+
</Tooltip.Portal>
27+
</Tooltip.Root>
28+
</Tooltip.Manager>
29+
</div>
30+
);
31+
}

0 commit comments

Comments
 (0)