Tooltip package contains three components for different use cases:

1. Use Hint if you only need to display element's label on hover/focus.
2. Use Tooltip to display additional information for an interactive element on hover/focus (for example, a short description for a button or a link).
3. Use DescriptionTooltip for the Informer pattern, that is, if the trigger's only function is to show the tooltip, or if your tooltip must contain several paragraphs and/or interactive elements. This type of tooltip is triggered by click/Enter/Space.

Tooltip

import Tooltip from '@semcore/ui/tooltip';
<Tooltip />;

TooltipProps

& & {...}

Name	Type	Description
title	React.ReactNode	Tooltip text
theme	"default" | "warning" | "invert"	Tooltip theme. You can use the default themes or create your own
interaction	"hover" | "click" | "focus" | "none" |	Hover interaction means that popper will be shown on mouse hover or keyboard focus. Click interactions means that popper will be shown on mouse click or keyboard Space/Enter keydown. Focus interaction means that popper will be shown on mouse or keyboard focus.

Hint

import { Hint } from '@semcore/ui/tooltip';
<Hint />;

TooltipHintProps

& & {...}

Name	Type	Description
title	string	Tooltip text
theme	"default" | "invert"	Tooltip theme. You can use the default themes or create your own

DescriptionTooltip

import { DescriptionTooltip } from '@semcore/ui/tooltip';
<DescriptionTooltip />;

DescriptionTooltipProps

& & {...}

Name	Type	Description
theme	"default" | "warning" | "invert"	Tooltip theme. You can use the default themes or create your own
interaction	"hover" | "click"	Hover interaction means that popper will be shown on mouse hover or keyboard focus. Click interactions means that popper will be shown on mouse click or keyboard Space/Enter keydown.