Tooltip

<ui5-tooltip> | Since 2.29.0

The ui5-tooltip shows a short, non-interactive text near an element to provide supplementary information. It opens on hover, keyboard focus and long-press, and closes on Escape, activation or when the pointer/focus leaves.

Usage

<ui5-button id="btn">Save</ui5-button>
<ui5-tooltip opener="btn" text="Save the document"></ui5-tooltip>

ES6 Module Import

import "@ui5/webcomponents/dist/Tooltip.js";

Properties

delay

Description	Delay in milliseconds before the tooltip opens or closes on hover and keyboard focus. Touch and Escape act immediately.
Type	number
Default	500

horizontalAlign

Description	Defines the horizontal alignment of the tooltip relative to its opener.
Type	"Center" | "End" | "Start" | "Stretch" (value descriptions in: PopoverHorizontalAlign)
Default	"Center"

opener

Description	Defines the element the tooltip reacts to and docks against, by id (within the same root) or a DOM reference.
Type	HTMLElement | string | undefined
Default	undefined

placement

Description	Defines the placement of the tooltip relative to its opener.
Type	"Bottom" | "End" | "Start" | "Top" (value descriptions in: PopoverPlacement)
Default	"Top"

text

Description	Defines the tooltip text.
Type	string
Default	""

Slots

No slots available for this component.

Events

No events available for this component.

Methods

closeTooltip

Description	Closes the tooltip.
Return type	void

isOpen

Description	Whether the tooltip is currently open.
Return type	boolean

openTooltip

Description	Opens the tooltip against its opener.
Return type	void

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.