Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Usage
Tooltip
component takes intrigger
prop.trigger
prop is the element that triggers the tooltip. It is a required prop. It can be a string or a React component.Children
ofTooltip
component are rendered inside the tooltip.
Interface for TooltipProps
interface TooltipProps {
trigger: React.ReactNode;
children: React.ReactNode;
className?: string;
}
Customizable Design
More granular components provide you with more control over the design of the Tooltip
component. You can customize the design of the Tooltip
component by using the following sub-components:
- Style of every sub-component of the Tooltip component can be customized using the
className
prop. - Pass in a
CSS class
or useTailwind CSS
utility classes to style the Tooltip component.