Tooltip

Description #

<vaadin-tooltip> is a Web Component for creating tooltips.

<button id="confirm">Confirm</button>
<vaadin-tooltip text="Click to save changes" for="confirm"></vaadin-tooltip>

Styling #

The following shadow DOM parts are available for styling:

Part name	Description
overlay	The overlay element
content	The overlay content element

The following state attributes are available for styling:

Attribute	Description
position	Reflects the position property value.

Custom CSS Properties #

The following custom CSS properties are available on the <vaadin-tooltip> element:

Custom CSS property	Description
--vaadin-tooltip-offset-top	Used as an offset when the tooltip is aligned vertically below the target
--vaadin-tooltip-offset-bottom	Used as an offset when the tooltip is aligned vertically above the target
--vaadin-tooltip-offset-start	Used as an offset when the tooltip is aligned horizontally after the target
--vaadin-tooltip-offset-end	Used as an offset when the tooltip is aligned horizontally before the target

See Styling Components documentation.

Properties #

ariaTarget #

Type: HTMLElement | HTMLElement[] | null | undefined

Element used to link with the aria-describedby attribute. Supports array of multiple elements. When not set, defaults to target.

context #

Type: Record<string, unknown>

Object with properties passed to generator and shouldShow functions for generating tooltip text or detecting whether to show the tooltip or not.

focusDelay #

Type: number

The delay in milliseconds before the tooltip is opened on keyboard focus, when not in manual mode.

for #

Type: string | undefined

The id of the element to be used as target value. The element should be in the DOM by the time when the attribute is set, otherwise a warning is shown.

generator #

Type: (context: Record<string, unknown>) => string

Function used to generate the tooltip content. When provided, it overrides the text property. Use the context property to provide argument that can be passed to the generator function.

hideDelay #

Type: number

The delay in milliseconds before the tooltip is closed on losing hover, when not in manual mode. On blur, the tooltip is closed immediately.

hoverDelay #

Type: number

The delay in milliseconds before the tooltip is opened on hover, when not in manual mode.

manual #

Type: boolean

When true, the tooltip is controlled programmatically instead of reacting to focus and mouse events.

opened #

Type: boolean

When true, the tooltip is opened. In manual mode, this can be set programmatically. In automatic mode, this is set automatically by internal logic.

position #

Type: PopoverPosition

Position of the overlay with respect to the target. Supported values: top-start, top, top-end, bottom-start, bottom, bottom-end, start-top, start, start-bottom, end-top, end, end-bottom.

See also: PopoverPosition

shouldShow #

Type: (target: HTMLElement, context?: Record<string, unknown> | undefined) => boolean

Function used to detect whether to show the tooltip based on a condition, called every time the tooltip is about to be shown on hover and focus. The function takes two parameters: target and context, which contain values of the corresponding tooltip properties at the time of calling. The tooltip is only shown when the function invocation returns true.

target #

Type: HTMLElement | undefined

Reference to the DOM element used both to trigger the overlay by user interaction and to visually position it on the screen.

Defaults to an element referenced with for attribute, in which case it must be located in the same shadow scope.

text #

Type: string | null | undefined

String used as a tooltip content.

Static Methods #

setDefaultFocusDelay #

Type: (focusDelay: number) => void

Sets the default focus delay to be used by all tooltip instances, except for those that have focus delay configured using property.

setDefaultHideDelay #

Type: (hideDelay: number) => void

Sets the default hide delay to be used by all tooltip instances, except for those that have hide delay configured using property.

setDefaultHoverDelay #

Type: (hoverDelay: number) => void

Sets the default hover delay to be used by all tooltip instances, except for those that have hover delay configured using property.

Types #

PopoverPosition #

export type PopoverPosition =
  | 'bottom-end'
  | 'bottom-start'
  | 'bottom'
  | 'end-bottom'
  | 'end-top'
  | 'end'
  | 'start-bottom'
  | 'start-top'
  | 'start'
  | 'top-end'
  | 'top-start'
  | 'top';