Tooltip

The Tooltip component displays additional information when users hover over or focus on an element.

Basic Usage

import { Tooltip, ThemeProvider, Button } from "@carton-org/react-neumorphism";

const MyComponent = () => {
  return (
    <Tooltip text="This is a tooltip">
      <Button>Hover me</Button>
    </Tooltip>
  );
};

Live Example

Props

Name	Type	Description	Required	Default Value
text	string	Text to display in the tooltip	Yes	-
alignment	"bottom-left" | "bottom-right" | "bottom-center" | "top-left" | "top-right" | "top-center"	Position of the tooltip relative to the trigger element	No	-
size	"xs" | "sm" | "md" | "lg" | "xl"	Size of the tooltip	No	"md"
children	React.ReactNode	Element that triggers the tooltip	Yes	-
tooltipStyle	React.CSSProperties	Custom styles for the tooltip container	No	-
tooltipLabelStyle	React.CSSProperties	Custom styles for the tooltip text label	No	-

Examples

Different Placements

Different Sizes

The Tooltip component supports five different sizes:

• xs (Extra Small): For minimal tooltips with very short text
• sm (Small): For compact tooltips with short text
• md (Medium): Default size, suitable for most use cases
• lg (Large): For tooltips with longer text
• xl (Extra Large): For tooltips with extensive content

Here's an example showing all available sizes:

With Different Elements

Link with Tooltip

🔔

Long text