thind ui

Menu

Components
Styleguide
Changelog

Getting Started

Installation
Dark / Light Mode
Thind JS
Figma File

Components

Accordion
Alert
Breadcrumbs
Card
Checkbox
Code Block
Dialog
Dropdown
Inputs
Form
Ordered Timeline List
Scrollbars
Radio Buttons
Toast
Tabs
Toggle Switch
Tooltip

Thind.dev Newsletter

Webflow developer goodies directly in your inbox.

You have been added to the list ✌️
Oops! Something went wrong while submitting the form.
Made by
Home
Components
Tooltip

Tooltip

The Tooltip component is built on the Tippy.js library, providing a versatile and user-friendly tooltip solution. It features a custom theme that seamlessly integrates with Thind Styleguide's light and dark modes, ensuring consistent visual harmony across your project. This component offers an intuitive way to display additional information on hover or focus, enhancing the user experience with sleek and responsive tooltips.

Installation

  1. Add to CSS to <head>

    <link
  rel="stylesheet"
  href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"
/>
<style>
.tippy-box[data-theme~='thind'] {
color: var(--body--color--background);
padding: 0.5rem;
border-radius: 0.5rem;
font-size: 0.75rem;
border: 1px solid var(--body--color--background);
background: var(--body--color--foreground);
box-shadow: 19px 161px 45px 0px rgba(0, 0, 0, 0.00), 12px 103px 41px 0px rgba(0, 0, 0, 0.01), 7px 58px 35px 0px rgba(0, 0, 0, 0.03), 3px 26px 26px 0px rgba(0, 0, 0, 0.05), 1px 6px 14px 0px rgba(0, 0, 0, 0.06);
}
.tippy-box[data-theme~='thind'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--body--color--foreground);
}
.tippy-box[data-theme~='thind'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--body--color--foreground);
}
.tippy-box[data-theme~='thind'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--body--color--foreground;
}
.tippy-box[data-theme~='thind'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--body--color--foreground);
}
</style>

  2. Add Tippy JS

    <script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
    or
    npm i tippy.js
import tippy from 'tippy.js';

  3. Initiate Tippy

    <script>
tippy('[data-tippy-content]', {
  theme: 'thind',
  animation: 'scale-subtle',
  inertia: true,
});
</script>

Using Tooltip

  1. Default

    Add a custom attribute data-tippy-content with value of what you want to show in the tooltip

    Here we are using data-tippy-content=You hovered over me

  2. Change Placement

    Add a custom attribute data-tippy-placement with value of top, bottom, right or left.