Skip to content

Commit d91acbd

Browse files
committed
feat(tooltip): add color prop
1 parent 965c476 commit d91acbd

File tree

4 files changed

+72
-3
lines changed

4 files changed

+72
-3
lines changed

.vitepress/meta/Tooltip.json

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,14 @@
7171
"inherit": "reka-ui",
7272
"default": "0"
7373
},
74+
{
75+
"name": "color",
76+
"description": "<p>Background color of the tooltip popup.</p>",
77+
"type": "\"indigo\" | \"gray\" | \"gold\" | \"bronze\" | \"brown\" | \"yellow\" | \"amber\" | \"orange\" | \"tomato\" | \"red\" | \"ruby\" | \"crimson\" | \"pink\" | \"plum\" | \"purple\" | \"violet\" | \"iris\" | \"blue\" | \"cyan\" | \"teal\" | \"jade\" | \"green\" | \"grass\" | \"lime\" | \"mint\" | \"sky\"",
78+
"required": false,
79+
"inherit": null,
80+
"default": "\"gray\""
81+
},
7482
{
7583
"name": "content",
7684
"description": "<p>The content associated with the tooltip.</p>",
@@ -98,7 +106,8 @@
98106
"description": "<p>The max width of the tooltip popup.</p>",
99107
"type": "string",
100108
"required": false,
101-
"inherit": null
109+
"inherit": null,
110+
"default": "\"360px\""
102111
},
103112
{
104113
"name": "positionStrategy",

docs/content/components/tooltip.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,12 @@ reka: https://reka-ui.com/docs/components/tooltip
1212
## API Reference
1313

1414
<PropsTable name="Tooltip" />
15+
16+
## Examples
17+
18+
By default, the tooltip has a black background in light mode and a white background in dark mode.
19+
You can customize the background color using the `color` prop.
20+
21+
### Color
22+
23+
<Example name="tooltip/Color.vue" />

docs/examples/tooltip/Color.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
import { Tooltip, IconButton, Icon } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex items-center gap-4">
7+
<Tooltip content="Add to library" color="indigo">
8+
<IconButton color="indigo" radius="full">
9+
<Icon icon="lucide:plus" />
10+
</IconButton>
11+
</Tooltip>
12+
13+
<Tooltip content="Add to library" color="violet">
14+
<IconButton color="violet" radius="full">
15+
<Icon icon="lucide:plus" />
16+
</IconButton>
17+
</Tooltip>
18+
19+
<Tooltip content="Add to library" color="crimson">
20+
<IconButton color="crimson" radius="full">
21+
<Icon icon="lucide:plus" />
22+
</IconButton>
23+
</Tooltip>
24+
25+
<Tooltip content="Add to library" color="amber">
26+
<IconButton color="amber" radius="full">
27+
<Icon icon="lucide:plus" />
28+
</IconButton>
29+
</Tooltip>
30+
</div>
31+
</template>

src/components/tooltip/Tooltip.vue

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
<script lang="ts">
22
import type { TooltipContentProps } from 'reka-ui'
3+
import type { ColorType } from '../types'
34
import ThemeWrapper from '../provider/ThemeWrapper.vue'
45
56
export interface TooltipProps extends TooltipContentProps {
67
/** The content associated with the tooltip. */
78
content?: string
8-
/** The max width of the tooltip popup. */
9+
/**
10+
* The max width of the tooltip popup.
11+
* @default "360px"
12+
*/
913
maxWidth?: string
14+
/** Background color of the tooltip popup.
15+
* @default "gray"
16+
*/
17+
color?: ColorType
1018
}
1119
</script>
1220

@@ -25,6 +33,7 @@ const props = withDefaults(defineProps<TooltipProps>(), {
2533
sideOffset: 4,
2634
collisionPadding: 10,
2735
avoidCollisions: true,
36+
color: 'gray',
2837
})
2938
3039
defineOptions({
@@ -56,6 +65,7 @@ defineOptions({
5665
:side="props.side"
5766
:side-offset="props.sideOffset"
5867
:sticky="props.sticky"
68+
:data-accent-color="props.color"
5969
:style="{maxWidth: props.maxWidth}"
6070
>
6171
<slot name="content">
@@ -75,12 +85,13 @@ defineOptions({
7585
.ui-Tooltip {
7686
box-sizing: border-box;
7787
padding: var(--space-1) var(--space-2);
78-
background-color: var(--gray-12);
7988
border-radius: var(--radius-2);
8089
transform-origin: var(--reka-tooltip-content-transform-origin);
8190
animation-duration: 140ms;
8291
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
92+
background-color: var(--accent-11);
8393
}
94+
8495
@media (prefers-reduced-motion: no-preference) {
8596
.ui-Tooltip:where([data-state='delayed-open']):where([data-side='top']) {
8697
animation-name: ui-slide-from-top, ui-fade-in;
@@ -103,7 +114,16 @@ defineOptions({
103114
line-height: var(--line-height-1);
104115
letter-spacing: var(--letter-spacing-1);
105116
}
117+
106118
.ui-TooltipArrow {
119+
fill: var(--accent-11);
120+
}
121+
122+
/* special handle for gray color */
123+
.ui-Tooltip:where([data-accent-color="gray"]) {
124+
background-color: var(--gray-12);
125+
}
126+
.ui-Tooltip:where([data-accent-color="gray"]) :where(.ui-TooltipArrow) {
107127
fill: var(--gray-12);
108128
}
109129
</style>

0 commit comments

Comments
 (0)