Tooltip

A simple text popup box.

Importing

To use the tooltip component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/tooltip";

register(); // Now the tooltip component is ready to use!

Web (Option 2)

import { registerTooltip } from "@tapsioss/web-components";

registerTooltip(); // Now the tooltip component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

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

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

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

Component Usage

Web

<tapsi-tooltip></tapsi-tooltip>

React

<Tooltip />

Properties

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

Methods

Name	Description	Parameters
show	Forces the tooltip to display.
hide	Forces the tooltip to hide.
updateTooltipPosition	Calculates and updates the position of the tooltip based on Its anchor element.

Events

Name	Description	Type	Bubbles	Cancelable
show	Fires when the tooltip should be visible.	ShowEvent	❌	✅
hide	Fires when the tooltip should be hidden.	HideEvent	❌	✅

TIP

Event details are available as JavaScript variables:

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

// Option 2
import {
 TooltipShowEvent,
 TooltipHideEvent
} from "@tapsioss/web-components";

You can have access to the event name using the type property:

// Option 1
element.addEventListener(ShowEvent.type, handleShow);
element.addEventListener(HideEvent.type, handleHide);

// Option 2
element.addEventListener(TooltipShowEvent.type, handleShow);
element.addEventListener(TooltipHideEvent.type, handleHide);