Skip to content zachleat Project

🚾Web Component Star Search

A searchable catalog of standalone web components.

<vaadin-tooltip>

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

Category
Overlays
Built with
Lit
Library
Vaadin
Author
Vaadin
Package
@vaadin/tooltip
Component size
38.6 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size
19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular
3 out of 5
Downloads
68,495/week · jsDelivr 4,046 hits/month (whole @vaadin/tooltip package)
Latest stable version
25.3.2
Last published
Component last changed
(in 25.3.0)
License
Apache-2.0

<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>

Markdown Support

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

<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 documentation.

Attributes

Events