vcf-tooltip | Vaadin

Web Component providing an easy way to display tooltips for any html element


npm version Published on Vaadin Directory

Web Component providing an easy way to display tooltips for any html element.

Screenshot of vcf-tooltip

Live demo ↗ | API documentation ↗


Install vcf-tooltip:

npm i @vaadin-component-factory/vcf-tooltip --save


Once installed, import it in your application:

import '@vaadin-component-factory/vcf-tooltip';

Add <vcf-tooltip> element with attribute for which will contain id of target element, to the page. Now after hovering on target element, toltip will be displayed.

<button id="element-id">Hover me</button>
<vcf-tooltip for="element-id" position="top">
  A short text describing the element.

Running demo

  1. Fork the vcf-tooltip repository and clone it locally.

  2. Make sure you have npm installed.

  3. When in the vcf-tooltip directory, run npm install to install dependencies.

  4. Run npm start to open the demo.

Server-side API

This is the client-side (Polymer 3) web component. If you are looking for the server-side (Java) API for the Vaadin Platform, it can be found here: Tooltip


Apache License 2.0


Link to this version
ImportedReleased 10 August 2021Other
Framework Support
Polymer 3.0+
Also supported:
Polymer 2 (1.2.1)
Browser Independent
Install with
npm install @vaadin-component-factory/vcf-tooltip"@1.3.15"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.3.15


  • @polymer/polymer#^3.2.0
  • @vaadin/vaadin-element-mixin#^2.1.3
  • @vaadin/vaadin-license-checker#^2.1.2
  • @vaadin/vaadin-lumo-styles#^1.5.0
  • @vaadin/vaadin-themable-mixin#^1.5.1