DashKit Icon
DashKit
Dashboard UI Kit
Getting Started
Structure
Components
Variables
Dark Mode
Installation
Template
Style Guide
Licensing
Changelog
Powered by Webflow
Template
Components
Component Documentation
here's a text to test the responsiveness
Hover
here's a text to test the responsiveness
Hover
here's a text to test the responsiveness
Hover
here's a text to test the responsiveness
Hover
here's a text to test the responsiveness
Hover
here's a text to test the responsiveness
Hover
here's a text to test the responsiveness
Hover
here's a text to test the responsiveness
Hover

Tooltip

The Tooltip component displays a small label when the user hovers or focuses on an element. It’s perfect for adding quick hints, extra info, or short descriptions without taking up space in your layout.

It works by wrapping a trigger slot (like an icon, button, or text), and showing a tooltip beside it.

Usage

  1. Drag the Tooltip component onto the canvas.
  2. Place your trigger element (e.g. icon or text) into the slot.
  3. Set the tooltip text using the Component Properties panel.
  4. Choose the position — top, bottom, left, or right — also using the properties.

Tooltips are great for form helpers, icon labels, or compact UI hints.

GSAP powered interaction

Inside the tooltip component, the .tooltip_trigger acts as a slot. When it is hovered, the .tooltip_positioning animates into view, and on hover-out it smoothly hides again.