-
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(components): add new tooltip component
- Loading branch information
Showing
5 changed files
with
258 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| --- | ||
| title: Tooltip | ||
| description: This set of components provides a tooltip implementation using the `@radix-ui/react-tooltip package`. It includes components for the tooltip provider, root, trigger, and content. | ||
| preview: tooltip | ||
| --- | ||
|
|
||
| import { Tab, Tabs } from "fumadocs-ui/components/tabs"; | ||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger, | ||
| } from "ruru-ui/components/tooltip"; | ||
| import { Button } from "ruru-ui/components/button"; | ||
|
|
||
| ## Usage | ||
|
|
||
| --- | ||
|
|
||
| <Tabs items={["Preview", "Code"]}> | ||
| <Tab className={"flex justify-center"} value="Preview" > | ||
| <TooltipProvider> | ||
| <Tooltip> | ||
| <TooltipTrigger | ||
| asChild> | ||
| <Button>Hover or focus me</Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent | ||
| style={{ padding: "0px", paddingRight: "10px", paddingLeft: "10px", height: "35px", display: "flex", justifyContent: "center", alignItems: "center" }} | ||
| > | ||
| Tooltip content here | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| </Tab> | ||
| <Tab className={"-mt-8"} value="Code"> | ||
| ```tsx | ||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger, | ||
| } from "ruru-ui/components/tooltip"; | ||
| import { Button } from "ruru-ui/components/button"; | ||
|
|
||
| export function TooltipDemo() { | ||
| return ( | ||
| <TooltipProvider> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Button>Hover or focus me</Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent className="px-[15px] py-[px]"> | ||
| Tooltip content here | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| ) | ||
| } | ||
| ``` | ||
| </Tab> | ||
|
|
||
| </Tabs> | ||
|
|
||
| ## Components | ||
|
|
||
| ### TooltipProvider | ||
|
|
||
| The `TooltipProvider` component is a context provider that wraps the tooltip components. It is required to be used in order to provide the context to the tooltip components. | ||
|
|
||
| ### Tooltip | ||
|
|
||
| The `Tooltip` component is a container component that wraps the `TooltipTrigger` and `TooltipContent` components. It is used to group the trigger and content components together. | ||
|
|
||
| ### TooltipTrigger | ||
|
|
||
| The `TooltipTrigger` component is a component that triggers the tooltip to be shown. It can be used as a child component or as a trigger for another component. | ||
|
|
||
| ### TooltipContent | ||
|
|
||
| The `TooltipContent` component is a component that contains the content of the tooltip. It is shown when the trigger component is hovered or focused. | ||
|
|
||
| ## props | ||
|
|
||
| --- | ||
|
|
||
| | Prop name | Type | Default value | Description | | ||
| | ---------- | --------------- | ------------- | ------------------------------------------------ | | ||
| | className | string | | Additional classes to style the tooltip content. | | ||
| | sideOffset | number | 8 | Offset from the trigger element. | | ||
| | ref | React.Ref | | Forwarded ref to the content element. | | ||
| | children | React.ReactNode | | Children to be rendered inside the tooltip. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| "use client"; | ||
|
|
||
| import * as React from "react"; | ||
| import * as TooltipPrimitive from "@radix-ui/react-tooltip"; | ||
|
|
||
| import { cn } from "@/utils/cn"; | ||
|
|
||
| /** | ||
| * TooltipProvider component. | ||
| * Provides context for all tooltip components. | ||
| * | ||
| * @component | ||
| * @example | ||
| * <TooltipProvider> | ||
| * <Tooltip> | ||
| * <TooltipTrigger asChild> | ||
| * <button>Hover or focus me</button> | ||
| * </TooltipTrigger> | ||
| * <TooltipContent> | ||
| * Tooltip content here | ||
| * </TooltipContent> | ||
| * </Tooltip> | ||
| * </TooltipProvider> | ||
| */ | ||
| const TooltipProvider = TooltipPrimitive.Provider; | ||
|
|
||
| /** | ||
| * Tooltip component. | ||
| * The root component for the tooltip. | ||
| * | ||
| * @component | ||
| * @example | ||
| * <Tooltip> | ||
| * <TooltipTrigger asChild> | ||
| * <button>Hover or focus me</button> | ||
| * </TooltipTrigger> | ||
| * <TooltipContent> | ||
| * Tooltip content here | ||
| * </TooltipContent> | ||
| * </Tooltip> | ||
| */ | ||
| const Tooltip = TooltipPrimitive.Root; | ||
|
|
||
| /** | ||
| * TooltipTrigger component. | ||
| * The element that triggers the display of the tooltip. | ||
| * | ||
| * @component | ||
| * @example | ||
| * <TooltipTrigger asChild> | ||
| * <button>Hover or focus me</button> | ||
| * </TooltipTrigger> | ||
| */ | ||
| const TooltipTrigger = TooltipPrimitive.Trigger; | ||
|
|
||
| /** | ||
| * TooltipContent component. | ||
| * The content of the tooltip that appears when the trigger is activated. | ||
| * | ||
| * @component | ||
| * @param {string} className - Additional classes to style the tooltip content. | ||
| * @param {number} sideOffset - Offset from the trigger element. | ||
| * @param {React.Ref} ref - Forwarded ref to the content element. | ||
| * @param {React.ReactNode} props.children - Children to be rendered inside the tooltip. | ||
| * @example | ||
| * <TooltipContent> | ||
| * Tooltip content here | ||
| * </TooltipContent> | ||
| */ | ||
| const TooltipContent = React.forwardRef< | ||
| React.ElementRef<typeof TooltipPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> | ||
| >(({ className, sideOffset = 5, ...props }, ref) => ( | ||
| <TooltipPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| "h-fit data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-primary-foreground select-none rounded-[4px] bg-primary px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]", | ||
| className | ||
| )} | ||
| sideOffset={sideOffset} | ||
| {...props} | ||
| > | ||
| {props.children} | ||
| <TooltipPrimitive.Arrow className="fill-primary" /> | ||
| </TooltipPrimitive.Content> | ||
| )); | ||
| TooltipContent.displayName = TooltipPrimitive.Content.displayName; | ||
|
|
||
| export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.