Add tooltip conponent
This commit is contained in:
parent
5a24e36519
commit
b736b880fb
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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" />,
|
||||
},
|
||||
};
|
Loading…
Reference in New Issue