Add tooltip conponent

This commit is contained in:
Arnaud 2024-08-28 10:03:44 +02:00
parent 5a24e36519
commit b736b880fb
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
3 changed files with 71 additions and 0 deletions

View File

@ -0,0 +1,32 @@
.tooltip {
cursor: help;
position: relative;
word-break: break-word;
}
.tooltip:hover::after {
position: absolute;
opacity: 0;
content: attr(data-tooltip);
animation: tooltip 0.35s cubic-bezier(0.42, 0, 0.62, 1.32) forwards;
color: var(--codex-color);
background: var(--codex-background-light);
border-radius: var(--codex-border-radius);
min-width: 150px;
max-width: 100%;
font-weight: 600;
text-align: center;
font-size: 0.85rem;
padding: 0.5rem;
bottom: 140%;
left: -140%;
}
@keyframes tooltip {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

View File

@ -0,0 +1,16 @@
import { ReactNode } from "react";
import "./Tooltip.css";
type Props = {
children: ReactNode;
message: string;
className?: string;
};
export function Tooltip({ children, message, className = "" }: Props) {
return (
<span className={"tooltip " + className} data-tooltip={message}>
{children}
</span>
);
}

View File

@ -0,0 +1,23 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Tooltip } from "../src/components/Tooltip/Tooltip";
import { CheckCircle } from "lucide-react";
const meta = {
title: "Overlays/Tooltip",
component: Tooltip,
parameters: {
layout: "centered",
},
tags: ["autodocs"],
argTypes: {},
} satisfies Meta<typeof Tooltip>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
message: "Hello world",
children: <CheckCircle size={"1rem"} className="cell-stateIcon" />,
},
};