# atomiks/tippyjs

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/atomiks-tippyjs).**

12,270 stars · 540 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/atomiks/tippyjs
- Homepage: https://atomiks.github.io/tippyjs/
- awesome-repositories: https://awesome-repositories.com/repository/atomiks-tippyjs.md

## Topics

`combobox` `dropdown` `menu` `popover` `popup` `tooltip`

## Description

Tippy.js is a JavaScript tooltip library and interactive popup framework used to create tooltips, popovers, and dropdowns. It functions as a floating UI component toolkit that renders content relative to a reference element with support for automatic positioning, flip-positioning, and offsets.

The library acts as an accessible overlay manager, using ARIA attributes and focus management to ensure screen reader compatibility. It also serves as a CSS animation tool, providing utilities for transitions, spring physics, and themes to manage the visual entry and exit of floating interface elements.

The toolkit covers broad capability areas including dynamic positioning and layout synchronization, event-driven trigger logic for various input methods, and a plugin architecture for extending lifecycle hooks. It supports diverse content management options, from rendering rich HTML and dynamic data to implementing headless positioning logic and coordinate-based context menus.

Performance is managed through strategies such as event delegation, deferred popup creation, and the use of singleton popup instances to reduce DOM overhead.

## Tags

### User Interface & Experience

- [Floating Element Positioning](https://awesome-repositories.com/f/user-interface-experience/floating-element-positioning.md) — Provides a geometric calculation engine for positioning overlays relative to target elements with automatic flip-positioning.
- [Tooltips](https://awesome-repositories.com/f/user-interface-experience/tooltips.md) — Implements small informational popups that appear when users hover over or focus on specific elements.
- [Accessibility Attribute Bindings](https://awesome-repositories.com/f/user-interface-experience/accessibility-attribute-bindings.md) — Provides mechanisms for linking reference elements and popup content using unique ARIA identifiers. ([source](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md))
- [Tooltips](https://awesome-repositories.com/f/user-interface-experience/content-display-components/tooltips.md) — A comprehensive library for creating tooltips, popovers, and dropdowns with automatic positioning and accessibility.
- [Popup Trigger Mapping](https://awesome-repositories.com/f/user-interface-experience/detached-popup-triggers/event-driven-popup-triggers/interaction-driven-trigger-logic/popup-trigger-mapping.md) — Activates popovers by mapping specific DOM events like hover, focus, or click to visibility state changes.
- [Floating Element Rendering](https://awesome-repositories.com/f/user-interface-experience/floating-element-rendering.md) — Renders floating content relative to a reference element with configurable placement, offsets, and custom HTML. ([source](https://atomiks.github.io/tippyjs/v6/all-props/))
- [Interaction Triggers](https://awesome-repositories.com/f/user-interface-experience/interaction-triggers.md) — Allows developers to define which user events, such as hover, focus, or click, trigger the tooltip. ([source](https://atomiks.github.io/tippyjs/v6/all-props/))
- [Interactive Popup Frameworks](https://awesome-repositories.com/f/user-interface-experience/interactive-popup-frameworks.md) — Offers a framework for building complex menus and popovers that allow user interaction within the floating element.
- [Anchor Attachments](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/interactive-tooltips/anchor-attachments.md) — Provides multiple ways to attach informational popups to elements using CSS selectors, DOM elements, or data attributes. ([source](https://atomiks.github.io/tippyjs/v6/constructor/))
- [Popover Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays.md) — Provides floating containers with interactive content that remain positioned relative to a trigger element.
- [Popover Generation](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays/popover-generation.md) — Implements the core capability of generating floating popovers containing text or HTML anchored to reference elements. ([source](https://atomiks.github.io/tippyjs/))
- [Overlay Managers](https://awesome-repositories.com/f/user-interface-experience/overlay-managers.md) — Manages ARIA attributes and focus order for floating content to ensure screen reader compatibility.
- [Overlay Visibility Controls](https://awesome-repositories.com/f/user-interface-experience/preview-controls/preview-visibility-controllers/overlay-visibility-controls.md) — Offers programmatic methods to show or hide popups independently of user interaction events. ([source](https://atomiks.github.io/tippyjs/v6/methods/))
- [Reference-Anchor Models](https://awesome-repositories.com/f/user-interface-experience/reference-anchor-models.md) — Ensures floating popups remain anchored to their reference elements during window resizing or scrolling. ([source](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md))
- [UI Event Triggers](https://awesome-repositories.com/f/user-interface-experience/ui-event-triggers.md) — Activates popovers using specific user events such as clicks, focus, or mouse enters with optional timing delays. ([source](https://atomiks.github.io/tippyjs/))
- [Floating UI Overlays](https://awesome-repositories.com/f/user-interface-experience/window-based-overlay-rendering/floating-ui-overlays.md) — Renders content relative to a reference element with support for automatic positioning, flip-positioning, and offsets.
- [Accessible Floating Overlays](https://awesome-repositories.com/f/user-interface-experience/window-based-overlay-rendering/floating-ui-overlays/accessible-floating-overlays.md) — Implements floating elements with ARIA attributes to ensure screen reader compatibility and keyboard navigation.
- [Screen Reader Optimizations](https://awesome-repositories.com/f/user-interface-experience/accessible-interface-design/screen-reader-optimizations.md) — Manages programmatic focus and announcement consolidation so screen readers describe tooltips upon element focus. ([source](https://atomiks.github.io/tippyjs/v6/accessibility/))
- [Spring Physics Configurations](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/animation-physics/spring-physics-configurations.md) — Uses CSS timing functions to simulate spring physics for elastic, bouncing entry and exit animations. ([source](https://atomiks.github.io/tippyjs/v6/animations/))
- [CSS Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/css-animation-utilities.md) — Provides utilities for applying CSS transitions, spring physics, and themes to floating interface elements.
- [Cursor Trajectory Tracking](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators/cursor-trajectory-tracking.md) — Updates floating element positions in real-time by tracking the coordinates of the mouse or touch cursor.
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/css-styling.md) — Supports styling the appearance and arrow colors of popups using custom CSS and data attributes. ([source](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md))
- [Design Systems](https://awesome-repositories.com/f/user-interface-experience/design-systems.md) — Integrates with design systems by allowing popups to be styled with predefined CSS classes. ([source](https://atomiks.github.io/tippyjs/v6/all-props/))
- [Detached Popup Triggers](https://awesome-repositories.com/f/user-interface-experience/detached-popup-triggers.md) — Allows a popup to be positioned relative to an element different from the one that triggered its appearance. ([source](https://atomiks.github.io/tippyjs/v6/misc/))
- [Dynamic Element Tracking](https://awesome-repositories.com/f/user-interface-experience/dynamic-element-tracking.md) — Renders real-time data or complex HTML inside a popup that tracks the mouse or follows a moving element.
- [Position Synchronization](https://awesome-repositories.com/f/user-interface-experience/fixed-position-components/position-animators/position-synchronization.md) — Continuously updates tooltip positions to track reference elements that are animating or changing layout. ([source](https://atomiks.github.io/tippyjs/v6/all-props/))
- [Floating Element Arrows](https://awesome-repositories.com/f/user-interface-experience/floating-element-arrows.md) — Provides directional pointers and rounded arrows that visually connect the popup to its trigger. ([source](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md))
- [Nested Menus](https://awesome-repositories.com/f/user-interface-experience/floating-menus/nested-menus.md) — Supports the creation of multi-level hierarchical hover menus by nesting popovers. ([source](https://atomiks.github.io/tippyjs/))
- [Floating Content Styling](https://awesome-repositories.com/f/user-interface-experience/floating-ui-components/floating-content-styling.md) — Allows application of custom themes, transition animations, and visual markers to floating elements. ([source](https://atomiks.github.io/tippyjs/))
- [Tooltip Configurations](https://awesome-repositories.com/f/user-interface-experience/hover-previews/map-marker-tooltips/tooltip-configurations.md) — Allows defining a base set of formatting and styling properties for all initialized tooltips. ([source](https://atomiks.github.io/tippyjs/v6/customization/))
- [Animation Pipelines](https://awesome-repositories.com/f/user-interface-experience/keyframe-animation-engines/css-animations/animation-pipelines.md) — Controls entry and exit transitions by managing class toggles and timing functions for spring and inertial effects.
- [Multi-Input Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/multi-input-interaction-handlers.md) — Ensures accessibility by activating tooltips through mouse hover, keyboard focus, or touch taps. ([source](https://atomiks.github.io/tippyjs/v6/accessibility/))
- [Focus Management](https://awesome-repositories.com/f/user-interface-experience/popovers/focus-management.md) — Controls popover visibility and focus order to ensure seamless keyboard navigation for users. ([source](https://atomiks.github.io/tippyjs/v6/accessibility/))
- [Runtime UI Content Updates](https://awesome-repositories.com/f/user-interface-experience/runtime-ui-content-updates.md) — Allows modifying the text, layout, or configuration of an active popup after it has been rendered. ([source](https://atomiks.github.io/tippyjs/v6/methods/))
- [Interactive Overlay Content](https://awesome-repositories.com/f/user-interface-experience/styled-properties/popup-styling/contextual-popups/annotation-popups/interactive-overlay-content.md) — Allows users to interact with content inside the popup and prevents clipping in overflow-hidden containers. ([source](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md))
- [Multi-Trigger Popups](https://awesome-repositories.com/f/user-interface-experience/styled-properties/popup-styling/contextual-popups/multi-trigger-popups.md) — Reduces DOM overhead by reusing a single popup instance across multiple different trigger elements. ([source](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md))
- [Multiple Popup Instance Managers](https://awesome-repositories.com/f/user-interface-experience/styled-properties/popup-styling/contextual-popups/multiple-popup-instance-managers.md) — Provides direct references to tooltip instances to programmatically manage their behavior and visibility. ([source](https://atomiks.github.io/tippyjs/v6/tippy-instance/))
- [Popup Positioning Engines](https://awesome-repositories.com/f/user-interface-experience/styled-properties/popup-styling/popup-positioning-engines.md) — Allows precise control of the spacing and distance between the reference element and the popup via offsets. ([source](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md))

### Content Management & Publishing

- [DOM-Based Content Renderers](https://awesome-repositories.com/f/content-management-publishing/content-processing-transformation/document-processing-conversion/document-processing/rendering-visualization/dom-based-content-renderers.md) — Renders diverse content types including plain text, DOM elements, or function return values within popups. ([source](https://atomiks.github.io/tippyjs/v6/html-content/))
- [Contextual Menus](https://awesome-repositories.com/f/content-management-publishing/category-organizations/hierarchical-navigations/dynamic-menu-hierarchies/contextual-menus.md) — Enables the creation of custom right-click or coordinate-based menus that appear at the point of interaction.

### Web Development

- [Accessibility Attribute Mapping](https://awesome-repositories.com/f/web-development/standard-html-attribute-mapping/accessibility-attribute-mapping.md) — Implements dynamic mapping of internal popup states to ARIA attributes for assistive technology support. ([source](https://atomiks.github.io/tippyjs/v6/all-props/))

### Part of an Awesome List

- [Popup Transitions](https://awesome-repositories.com/f/awesome-lists/media/animation-transitions/ui-transition-animations/popup-transitions.md) — Implements configurable entry and exit animations for floating elements, including transition types, durations, and inertia effects. ([source](https://atomiks.github.io/tippyjs/v6/all-props/))

### Development Tools & Productivity

- [Configuration Inheritance](https://awesome-repositories.com/f/development-tools-productivity/configuration-inheritance.md) — Applies a hierarchical set of shared properties to all instances to ensure visual and behavioral consistency.
- [Global Defaults](https://awesome-repositories.com/f/development-tools-productivity/global-defaults.md) — Provides centralized configuration for applying consistent settings across all popup instances. ([source](https://atomiks.github.io/tippyjs/v6/methods/))

### Software Engineering & Architecture

- [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Ships a modular framework for adding custom behaviors and lifecycle hooks to overlay instances. ([source](https://atomiks.github.io/tippyjs/v6/plugins/))
- [Headless Component Logic](https://awesome-repositories.com/f/software-engineering-architecture/logic-and-presentation-separation/headless-component-logic.md) — Implements a headless pattern that manages positioning and state logic while leaving the visual rendering to the developer. ([source](https://atomiks.github.io/tippyjs/v6/headless-tippy/))
- [Hook-Based Plugin Systems](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/hook-based-plugin-systems.md) — Extends core functionality by registering custom logic into lifecycle events like creation, showing, and hiding.