feat(tooltip): add color prop

Author: lepture

.vitepress/meta/Tooltip.json

@@ -71,6 +71,14 @@
       "inherit": "reka-ui",
       "default": "0"
     },
+    {
+      "name": "color",
+      "description": "<p>Background color of the tooltip popup.</p>",
+      "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\"",
+      "required": false,
+      "inherit": null,
+      "default": "\"gray\""
+    },
     {
       "name": "content",
       "description": "<p>The content associated with the tooltip.</p>",
@@ -98,7 +106,8 @@
       "description": "<p>The max width of the tooltip popup.</p>",
       "type": "string",
       "required": false,
-      "inherit": null
+      "inherit": null,
+      "default": "\"360px\""
     },
     {
       "name": "positionStrategy",

docs/content/components/tooltip.md

@@ -12,3 +12,12 @@ reka: https://reka-ui.com/docs/components/tooltip
 ## API Reference
 
 <PropsTable name="Tooltip" />
+
+## Examples
+
+By default, the tooltip has a black background in light mode and a white background in dark mode.
+You can customize the background color using the `color` prop.
+
+### Color
+
+<Example name="tooltip/Color.vue" />

docs/examples/tooltip/Color.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Tooltip, IconButton, Icon } from '#components'
+</script>
+
+<template>
+  <div class="flex items-center gap-4">
+    <Tooltip content="Add to library" color="indigo">
+      <IconButton color="indigo" radius="full">
+        <Icon icon="lucide:plus" />
+      </IconButton>
+    </Tooltip>
+
+    <Tooltip content="Add to library" color="violet">
+      <IconButton color="violet" radius="full">
+        <Icon icon="lucide:plus" />
+      </IconButton>
+    </Tooltip>
+
+    <Tooltip content="Add to library" color="crimson">
+      <IconButton color="crimson" radius="full">
+        <Icon icon="lucide:plus" />
+      </IconButton>
+    </Tooltip>
+
+    <Tooltip content="Add to library" color="amber">
+      <IconButton color="amber" radius="full">
+        <Icon icon="lucide:plus" />
+      </IconButton>
+    </Tooltip>
+  </div>
+</template>

src/components/tooltip/Tooltip.vue

@@ -1,12 +1,20 @@
 <script lang="ts">
 import type { TooltipContentProps } from 'reka-ui'
+import type { ColorType } from '../types'
 import ThemeWrapper from '../provider/ThemeWrapper.vue'
 
 export interface TooltipProps extends TooltipContentProps {
   /** The content associated with the tooltip. */
   content?: string
-  /** The max width of the tooltip popup. */
+  /**
+   * The max width of the tooltip popup.
+   * @default "360px"
+   */
   maxWidth?: string
+  /** Background color of the tooltip popup.
+   * @default "gray"
+   */
+  color?: ColorType
 }
 </script>
 
@@ -25,6 +33,7 @@ const props = withDefaults(defineProps<TooltipProps>(), {
   sideOffset: 4,
   collisionPadding: 10,
   avoidCollisions: true,
+  color: 'gray',
 })
 
 defineOptions({
@@ -56,6 +65,7 @@ defineOptions({
           :side="props.side"
           :side-offset="props.sideOffset"
           :sticky="props.sticky"
+          :data-accent-color="props.color"
           :style="{maxWidth: props.maxWidth}"
         >
           <slot name="content">
@@ -75,12 +85,13 @@ defineOptions({
 .ui-Tooltip {
   box-sizing: border-box;
   padding: var(--space-1) var(--space-2);
-  background-color: var(--gray-12);
   border-radius: var(--radius-2);
   transform-origin: var(--reka-tooltip-content-transform-origin);
   animation-duration: 140ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  background-color: var(--accent-11);
 }
+
 @media (prefers-reduced-motion: no-preference) {
   .ui-Tooltip:where([data-state='delayed-open']):where([data-side='top']) {
     animation-name: ui-slide-from-top, ui-fade-in;
@@ -103,7 +114,16 @@ defineOptions({
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
 }
+
 .ui-TooltipArrow {
+  fill: var(--accent-11);
+}
+
+/* special handle for gray color */
+.ui-Tooltip:where([data-accent-color="gray"]) {
+  background-color: var(--gray-12);
+}
+.ui-Tooltip:where([data-accent-color="gray"]) :where(.ui-TooltipArrow) {
   fill: var(--gray-12);
 }
 </style>