Skip to content

Commit 21f6d4d

Browse files
tanerengiiintanerengiiin
authored
Merge pull request #8162 from primefaces/v11-tooltip
New Component: Tooltip
2 parents 5d12fd6 + 809fed8 commit 21f6d4d

70 files changed

Lines changed: 2834 additions & 0 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/assets/styles/global.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,22 @@
33
/*@import '@docsearch/css/dist/style.css';*/
44
@import "./tailwind/main.css";
55
@import "./layout/layout.css";
6+
7+
.p-placer-content-enter-from,
8+
.p-placer-content-leave-to {
9+
opacity: 0;
10+
transform: scale(0.9);
11+
}
12+
13+
.p-placer-content-enter-to,
14+
.p-placer-content-leave-from {
15+
opacity: 1;
16+
transform: scale(1);
17+
}
18+
19+
.p-placer-content-leave-active,
20+
.p-placer-content-enter-active {
21+
transition:
22+
opacity 250ms cubic-bezier(0.16, 1, 0.3, 1),
23+
transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
24+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Button } from 'primereact/button';
2+
import { Tooltip } from 'primereact/tooltip';
3+
4+
export default function ArrowDemo() {
5+
return (
6+
<div className="card flex items-center justify-center gap-6">
7+
<Tooltip>
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>
18+
<Tooltip>
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>
28+
</div>
29+
);
30+
}

‎apps/showcase/demo/tooltip/delay-demo.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Button } from 'primereact/button';
2+
import { Tooltip } from 'primereact/tooltip';
3+
4+
export default function DelayDemo() {
5+
return (
6+
<div className="card flex flex-col items-center justify-center gap-8">
7+
<Tooltip showDelayDuration={1000} hideDelayDuration={1000}>
8+
<Tooltip.Trigger as={Button} severity="secondary">
9+
Show Tooltip
10+
</Tooltip.Trigger>
11+
<Tooltip.Portal>
12+
<Tooltip.Content>
13+
<p>This is a tooltip</p>
14+
</Tooltip.Content>
15+
</Tooltip.Portal>
16+
</Tooltip>
17+
<Tooltip.Group as="div" className="flex items-center gap-2" timeout={1000} skipTimeout={300}>
18+
<Tooltip>
19+
<Tooltip.Trigger as={Button} severity="secondary">
20+
Item 1
21+
</Tooltip.Trigger>
22+
<Tooltip.Portal>
23+
<Tooltip.Content>
24+
<p>This is a tooltip</p>
25+
</Tooltip.Content>
26+
</Tooltip.Portal>
27+
</Tooltip>
28+
<Tooltip>
29+
<Tooltip.Trigger as={Button} severity="secondary">
30+
Item 2
31+
</Tooltip.Trigger>
32+
<Tooltip.Portal>
33+
<Tooltip.Content>
34+
<p>This is a tooltip</p>
35+
</Tooltip.Content>
36+
</Tooltip.Portal>
37+
</Tooltip>
38+
</Tooltip.Group>
39+
</div>
40+
);
41+
}

‎apps/showcase/demo/tooltip/offset-demo.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Button } from 'primereact/button';
2+
import { Tooltip } from 'primereact/tooltip';
3+
4+
function OffsetDemo() {
5+
return (
6+
<div className="card flex items-center justify-center gap-4">
7+
<Tooltip sideOffset={24}>
8+
<Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
9+
Show Tooltip
10+
</Tooltip.Trigger>
11+
<Tooltip.Portal>
12+
<Tooltip.Content>
13+
<p>Tooltip with 24px side offset</p>
14+
<Tooltip.Arrow />
15+
</Tooltip.Content>
16+
</Tooltip.Portal>
17+
</Tooltip>
18+
<Tooltip alignOffset={24} align="end" side="bottom">
19+
<Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
20+
Show Tooltip
21+
</Tooltip.Trigger>
22+
<Tooltip.Portal>
23+
<Tooltip.Content>
24+
<p>Tooltip with 24px align offset</p>
25+
<Tooltip.Arrow />
26+
</Tooltip.Content>
27+
</Tooltip.Portal>
28+
</Tooltip>
29+
</div>
30+
);
31+
}
32+
33+
export default OffsetDemo;

‎apps/showcase/demo/tooltip/placement-demo.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { Button } from 'primereact/button';
2+
import { Tooltip } from 'primereact/tooltip';
3+
4+
export default function PlacementDemo() {
5+
return (
6+
<div className="card flex flex-col items-center justify-center gap-12">
7+
<div className="flex items-center justify-center gap-6">
8+
<Tooltip side="top">
9+
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
10+
Top
11+
</Tooltip.Trigger>
12+
<Tooltip.Portal>
13+
<Tooltip.Content>
14+
<p>Tooltip placed to the top</p>
15+
<Tooltip.Arrow />
16+
</Tooltip.Content>
17+
</Tooltip.Portal>
18+
</Tooltip>
19+
<Tooltip side="bottom">
20+
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
21+
Bottom
22+
</Tooltip.Trigger>
23+
<Tooltip.Portal>
24+
<Tooltip.Content>
25+
<p>Tooltip placed to the bottom</p>
26+
<Tooltip.Arrow />
27+
</Tooltip.Content>
28+
</Tooltip.Portal>
29+
</Tooltip>
30+
<Tooltip side="right">
31+
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
32+
Right
33+
</Tooltip.Trigger>
34+
<Tooltip.Portal>
35+
<Tooltip.Content>
36+
<p>Tooltip placed to the right</p>
37+
<Tooltip.Arrow />
38+
</Tooltip.Content>
39+
</Tooltip.Portal>
40+
</Tooltip>
41+
<Tooltip side="left">
42+
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
43+
Left
44+
</Tooltip.Trigger>
45+
<Tooltip.Portal>
46+
<Tooltip.Content>
47+
<p>Tooltip placed to the left</p>
48+
<Tooltip.Arrow />
49+
</Tooltip.Content>
50+
</Tooltip.Portal>
51+
</Tooltip>
52+
</div>
53+
<div className="flex items-center justify-center gap-6">
54+
<Tooltip align="start">
55+
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
56+
Start
57+
</Tooltip.Trigger>
58+
<Tooltip.Portal>
59+
<Tooltip.Content>
60+
<p>Tooltip aligned to the start</p>
61+
<Tooltip.Arrow />
62+
</Tooltip.Content>
63+
</Tooltip.Portal>
64+
</Tooltip>
65+
<Tooltip align="center">
66+
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
67+
Center
68+
</Tooltip.Trigger>
69+
<Tooltip.Portal>
70+
<Tooltip.Content>
71+
<p>Tooltip aligned to the center</p>
72+
<Tooltip.Arrow />
73+
</Tooltip.Content>
74+
</Tooltip.Portal>
75+
</Tooltip>
76+
<Tooltip align="end">
77+
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
78+
End
79+
</Tooltip.Trigger>
80+
<Tooltip.Portal>
81+
<Tooltip.Content>
82+
<p>Tooltip aligned to the end</p>
83+
<Tooltip.Arrow />
84+
</Tooltip.Content>
85+
</Tooltip.Portal>
86+
</Tooltip>
87+
</div>
88+
</div>
89+
);
90+
}

‎apps/showcase/demo/tooltip/with-togglebutton-demo.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { ToggleButton } from 'primereact/togglebutton';
2+
import { Tooltip } from 'primereact/tooltip';
3+
4+
const content = [
5+
{
6+
icon: 'pi pi-align-left',
7+
label: 'Align left',
8+
value: 'left'
9+
},
10+
{
11+
icon: 'pi pi-align-center',
12+
label: 'Align center',
13+
value: 'center'
14+
},
15+
{
16+
icon: 'pi pi-align-right',
17+
label: 'Align right',
18+
value: 'right'
19+
},
20+
{
21+
icon: 'pi pi-align-justify',
22+
label: 'Align justify',
23+
value: 'justify'
24+
}
25+
];
26+
27+
export default function WithToggleButtonDemo() {
28+
return (
29+
<div className="card flex items-center justify-center">
30+
<Tooltip.Group>
31+
<ToggleButton.Group allowEmpty={false}>
32+
{content.map((item) => (
33+
<Tooltip key={item.value}>
34+
<Tooltip.Trigger as={ToggleButton} value={item.value}>
35+
<ToggleButton.Indicator>
36+
<i className={item.icon}></i>
37+
</ToggleButton.Indicator>
38+
</Tooltip.Trigger>
39+
<Tooltip.Portal>
40+
<Tooltip.Content>
41+
<p>{item.label}</p>
42+
<Tooltip.Arrow />
43+
</Tooltip.Content>
44+
</Tooltip.Portal>
45+
</Tooltip>
46+
))}
47+
</ToggleButton.Group>
48+
</Tooltip.Group>
49+
</div>
50+
);
51+
}

‎apps/showcase/docs/components/tooltip/api.mdx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
title: Tooltip API
3+
description: API documentation for Tooltip component
4+
component: tooltip
5+
---
6+
7+
## TooltipTrigger
8+
9+
### Props
10+
11+
<DocTable name="TooltipTrigger" category="api" type="props" />
12+
13+
### Exposes
14+
15+
<DocTable name="TooltipTrigger" category="api" type="exposes" />
16+
17+
### Interfaces
18+
19+
<DocTable name="TooltipTrigger" category="api" type="interfaces" />
20+
21+
### Types
22+
23+
<DocTable name="TooltipTrigger" category="api" type="types" />
24+
25+
## TooltipPortal
26+
27+
### Props
28+
29+
<DocTable name="TooltipPortal" category="api" type="props" />
30+
31+
### Exposes
32+
33+
<DocTable name="TooltipPortal" category="api" type="exposes" />
34+
35+
### Interfaces
36+
37+
<DocTable name="TooltipPortal" category="api" type="interfaces" />
38+
39+
### Types
40+
41+
<DocTable name="TooltipPortal" category="api" type="types" />
42+
43+
## TooltipContent
44+
45+
### Props
46+
47+
<DocTable name="TooltipContent" category="api" type="props" />
48+
49+
### Exposes
50+
51+
<DocTable name="TooltipContent" category="api" type="exposes" />
52+
53+
### Interfaces
54+
55+
<DocTable name="TooltipContent" category="api" type="interfaces" />
56+
57+
### Types
58+
59+
<DocTable name="TooltipContent" category="api" type="types" />
60+
61+
## TooltipArrow
62+
63+
### Props
64+
65+
<DocTable name="TooltipArrow" category="api" type="props" />
66+
67+
### Exposes
68+
69+
<DocTable name="TooltipArrow" category="api" type="exposes" />
70+
71+
### Interfaces
72+
73+
<DocTable name="TooltipArrow" category="api" type="interfaces" />
74+
75+
### Types
76+
77+
<DocTable name="TooltipArrow" category="api" type="types" />

0 commit comments

Comments
 (0)