---
title: Tooltip
description: Tooltip
element: vaadin-tooltip
---

## Description

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

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

### Markdown Support

The tooltip supports rendering Markdown content by setting the `markdown` property:

```html
<button id="info">Info</button>
<vaadin-tooltip
  text="**Important:** Click to view *detailed* information"
  markdown
  for="info">
</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
-----------------|----------------------------------------
`markdown`       | Reflects the `markdown` property value.
`position`       | Reflects the `position` property value.

The following custom CSS properties are available for styling:

Custom CSS property                |
:----------------------------------|
| `--vaadin-tooltip-background`    |
| `--vaadin-tooltip-border-color`  |
| `--vaadin-tooltip-border-radius` |
| `--vaadin-tooltip-border-width`  |
| `--vaadin-tooltip-font-size`     |
| `--vaadin-tooltip-font-weight`   |
| `--vaadin-tooltip-line-height`   |
| `--vaadin-tooltip-max-width`     |
| `--vaadin-tooltip-offset-bottom` |
| `--vaadin-tooltip-offset-end`    |
| `--vaadin-tooltip-offset-start`  |
| `--vaadin-tooltip-offset-top`    |
| `--vaadin-tooltip-padding`       |
| `--vaadin-tooltip-shadow`        |
| `--vaadin-tooltip-text-color`    |

See [Styling Components](https://vaadin.com/docs/latest/styling/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.

### markdown

**Type:** `boolean`

When enabled, the tooltip text is rendered as Markdown.

**Note:** Using Markdown is discouraged if accessibility of the tooltip
content is essential, as semantics of the rendered HTML content
(headers, lists, ...) will not be conveyed to assistive technologies.

### 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](#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.

## Events

### content-changed

**Type:** [TooltipContentChangedEvent](#tooltipcontentchangedevent)

Fired when the tooltip text content is changed.

## Types

### PopoverPosition

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

### TooltipContentChangedEvent

```ts
/**
 * Fired when the tooltip text content is changed.
 */
export type TooltipContentChangedEvent = CustomEvent<{ content: string }>;
```