Tooltip

Tooltip package contains three components for different use cases:

Use Hint if you only need to display element's label on hover/focus.
Use Tooltip to display additional information for an interactive element on hover/focus (for example, a short description for a button or a link).
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.

jsx

import Tooltip from 'intergalactic/tooltip';
<Tooltip />;

import Tooltip from 'intergalactic/tooltip';
<Tooltip />;

& & {...}

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

jsx

import { Hint } from 'intergalactic/tooltip';
<Hint />;

import { Hint } from 'intergalactic/tooltip';
<Hint />;

& & {...}

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

jsx

import { DescriptionTooltip } from 'intergalactic/tooltip';
<DescriptionTooltip />;

import { DescriptionTooltip } from 'intergalactic/tooltip';
<DescriptionTooltip />;

& & {...}

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.