Tooltip Component

ℹ️

The Tooltip component is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our Tooltip component is dynamic and easy to use. It is also fully customizable.

Example Preview

Tooltip Example

Usage

import Tooltip from "@/@core";
 
// ...
 
const MyComponent = () => {
  return (
    <div>
      <Tooltip text="Tooltip content" position="top" color="primary">
        <button className="btn btn-primary">Hover me</button>
      </Tooltip>
    </div>
  );
};

Props

Prop name	Type	Default value	Required	Description
children	ReactNode	-	Yes	The content that triggers the tooltip on hover.
text	string	-	Yes	The text to be displayed in the tooltip.
position	`top`, `bottom`, `left`, `right`	`top`	No	The position of the tooltip relative to the trigger element.
color	`primary`, `secondary`, `success`, `error`, `warning`, `info`, `accent`	`primary`	No	The color theme of the tooltip.
open	boolean	`false`	No	Whether the tooltip should be open by default.
className	string	-	No	Additional classes to be applied to the tooltip.

Example

Check out the example above for a basic usage of the Tooltip component.

For more detailed examples and customization options refer to the example files or demos in your package.

ℹ️

Note: The Tooltip component is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our Tooltip component is dynamic and easy to use. It is also fully customizable.

Timeline Typography