Tooltip

The tooltip component.

Importing

Web

import "@tapsioss/web-components/tooltip";

React

import { Tooltip } from "@tapsioss/react-components/Tooltip";

Component Usage

Web

<tapsi-tooltip></tapsi-tooltip>

React

<Tooltip />

Properties

Name	Description	Type	Default Value
placement	The position of the tooltip based on the anchor.	"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"	"top"
dismissible	Whether tooltip is dismissable or not.	boolean	true
text	The text content of the tooltip.	string	""
visible	Whether the tooltip is visible or not.	boolean	false
no-hover-activation	Whether to prevent showing tooltip on hover or not.	boolean	false
no-focus-activation	Whether to prevent showing tooltip on focus or not.	boolean	false
no-escape-deactivation	Whether to hide tooltip on escape or not.	boolean	false
anchor	The id of the anchor element.	string	""

Events

Name	Description	Type
show	Fires when the tooltip should be visible. (Cancelable)	ShowEvent
hide	Fires when the tooltip should be hidden. (Cancelable)	HideEvent

TIP

You can import custom event names:

Web

import { 
  ShowEvent,
  HideEvent
} from "@tapsioss/web-components/tooltip";

element.addEventListener(ShowEvent.type, handleTapsiTooltipShow);
element.addEventListener(HideEvent.type, handleTapsiTooltipHide);

React

import { 
  TooltipShowEvent,
  TooltipHideEvent
} from "@tapsioss/react-components";


// ...

<Tooltip
  onShowEvent={(e: TooltipShowEvent) => {...}}
  onHideEvent={(e: TooltipHideEvent) => {...}}
/>