Docs

Docs

Tooltip

Tooltips are small pop-ups that can provide additional information about a UI element on hover and keyboard focus.
<TextField placeholder="Search">
  <Icon slot="prefix" icon="lumo:search" />
  <Tooltip slot="tooltip" text='Wrap in "quotes" for exact phrase' />
</TextField>

Tooltips support only plain text content. They aren’t focusable and can’t contain interactive elements.

Other UI Elements

Tooltips can also be displayed for UI elements that lack a dedicated tooltip API. They can’t be guaranteed, however, to have proper accessibility.

<h2 id="heading">Heading with tooltip</h2>
<Tooltip for="heading" text="This is a tooltip" position="top-start" />

The following components have dedicated APIs for configuring tooltips:

Positioning

The default positioning of the tooltip in relation to the target element can be overridden. This can be useful for optimizing where the tooltip is rendered, to avoid overlaying other important UI elements, or for purely aesthetic purposes.

<Tabs orientation="vertical">
  <Tab>
    <a tabIndex={-1}>
      <Icon icon="vaadin:home" />
    </a>
    <Tooltip slot="tooltip" text="Home" position="end" />
  </Tab>
  <Tab>
    <a tabIndex={-1}>
      <Icon icon="vaadin:calendar" />
    </a>
    <Tooltip slot="tooltip" text="Calendar" position="end" />
  </Tab>
  <Tab>
    <a tabIndex={-1}>
      <Icon icon="vaadin:chart" />
    </a>
    <Tooltip slot="tooltip" text="Reports" position="end" />
  </Tab>
</Tabs>
Important
 You can find more information in the corresponding article on vaadin.com.