atomiks/tippyjs

★ 12,277JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((tippy.js))
    What it does
      Tooltips and popovers
      Dropdown menus
      Overlay positioning
    How it works
      Built on Popper
      Single function call
      Event-driven show and hide
    Integrations
      React component wrapper
      CDN script tag
      npm package
    Features
      Touch screen support
      Keyboard navigation
      Animations

mindmap root((tippy.js)) What it does Tooltips and popovers Dropdown menus Overlay positioning How it works Built on Popper Single function call Event-driven show and hide Integrations React component wrapper CDN script tag npm package Features Touch screen support Keyboard navigation Animations

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a tooltip to any button or icon that explains what it does when the user hovers over it.

USE CASE 2

Show a small popover panel with extra content when a user clicks a link or trigger element.

USE CASE 3

Attach a dropdown menu to a button that appears in the correct position even near screen edges.

USE CASE 4

Use the @tippyjs/react package to add tooltips to React components with a familiar component API.

Tech stack

JavaScriptTypeScriptReactPopper.js

Getting it running

Difficulty · easy Time to first run · 5min

Use freely in any project, personal or commercial, with no restrictions beyond keeping the MIT copyright notice.

In plain English

Tippy.js is a JavaScript library that adds small pop-up elements to web pages. When a user hovers over a button, clicks a link, or focuses on an input field, Tippy can show a tooltip (a small label explaining what something does), a popover (a mini panel with more content), a dropdown menu, or any other overlay element. It handles all the positioning logic so the pop-up appears in the right place on screen, even when the page is scrolled or the window is resized. Adding it to a project is straightforward. Developers can install it through npm or Yarn, two common package managers that JavaScript developers use to fetch third-party code, or they can paste a script tag into an HTML page to load it directly from the web via a CDN (a content delivery network that hosts files publicly). No complex setup is required: once installed, calling a single function with a reference to any page element is enough to attach a tooltip. The library is built on top of another library called Popper, which handles the math of placing floating elements correctly next to their trigger. Tippy itself adds all the interaction behavior on top: showing and hiding the pop-up, animating it, and handling edge cases like touch screens or keyboard navigation. For teams building with React, there is an official companion package called @tippyjs/react that wraps the core library in a component format React developers already know. An unofficial wrapper exists for Ember as well. The README is brief and points readers to the documentation website for detailed configuration options, theming, and accessibility guidance. The library is released under the MIT license, which means anyone can use it freely in personal or commercial projects.

Copy-paste prompts

Prompt 1

Using tippy.js, add a tooltip that says 'Copy to clipboard' to a button and shows a 'Copied!' confirmation message after the button is clicked.

Prompt 2

Show me how to use @tippyjs/react to wrap a React icon button with a tooltip that only appears on hover, with a fade animation and dark theme.

Prompt 3

I want a popover in tippy.js that contains an HTML form and appears when a button is clicked. Show me how to set trigger to 'click' and use an HTML template as the content.

Prompt 4

Using tippy.js, create a dropdown menu that appears below a button with a list of navigation links and closes when the user clicks outside it.

Open on GitHub → Explain another repo

← atomiks on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.