Top 9 CSS and JavaScript Tooltip Libraries

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • hint.css

    A CSS only tooltip library for your lovely websites.

  • Hint.css (8.4k ⭐) — A CSS library that helps you create simple and elegant tooltips using only HTML and CSS. It does not require any JavaScript and supports accessibility with aria-label attributes. Hint.css offers different positions, colors, sizes, and effects for your tooltips.

  • floating-vue

    💬 Easy tooltips, popovers, dropdown, menus... for Vue

  • Floating Vue (3.2k ⭐) — A Vue library that helps you create and position tooltips, dropdowns, menus and other poppers in your Vue application. It is powered by Floating UI and supports flexible configuration, powerful theming, and accessibility. Floating Vue is easy to use, compatible, and customizable.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • tether

    A positioning engine to make overlays, tooltips and dropdowns better

  • Tether (8.5k ⭐) — A JavaScript library that helps you position overlays, tooltips, dropdowns and other floating elements near a reference element. It also prevents them from being clipped or cut off by the viewport or other containers. Tether is lightweight, extensible, and compatible with different browsers and environments.

  • floating-ui

    A JavaScript library to position floating elements and create interactions for them.

  • Floating UI (28.7k ⭐) — A JavaScript library that helps you create and position floating elements such as tooltips, popovers, dropdowns, and more. It also provides hooks and components for building accessible user interactions with React. Floating UI is smart, flexible, and platform-agnostic. Floating UI is the evolution of Popper 2, designed to bring the project to a new level.

  • react-tooltip

    React Tooltip Component

  • React Tooltip (3.5k ⭐) — A React library that helps you create tooltips for your React components. It is based on the react-tooltip package and supports various props and options to customize the appearance and behavior of the tooltips. React Tooltip is easy to use, accessible, and responsive.

  • tippyjs

    Tooltip, popover, dropdown, and menu library

  • Tippy.js (11.7k ⭐) — A lightweight, compatible, and easy to use JavaScript library that helps you create and customize tooltips, popovers, dropdowns, and menus. It is powered by Popper.js and supports animations, themes, accessibility, and interactivity.

  • balloon.css

    Simple tooltips made of pure CSS

  • Balloon.css (5k ⭐) — A CSS library that helps you create simple and elegant tooltips using only HTML and CSS. It does not require any JavaScript and supports accessibility with aria-label attributes. Balloon.css offers different positions, colors, sizes, and effects for your tooltips.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • Bootstrap

    The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

  • Bootstrap Tooltips — A component of the Bootstrap (168k ⭐) framework that helps you add custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. They rely on the Popper.js library for positioning and offer various options to customize the appearance and behavior of the tooltips. Bootstrap tooltips are opt-in for performance reasons, so you must initialize them yourself.

  • nanopop

    🍦 Minimalistic, small, positioning engine. Build for high-performance, minimal footprint and maximum control over positioning behavior.

  • NanoPop (640 ⭐) — A minimalistic, small, positioning engine for JavaScript. It is built for high-performance, minimal footprint and maximum control over positioning behavior. Nanopop can be used to position tooltips, popovers, dropdowns and other floating elements near a reference element.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • How to implement this hover effect?

    1 project | /r/react | 26 Aug 2023
  • Floating UI – Create tooltips, popovers, and dropdowns

    1 project | news.ycombinator.com | 21 Feb 2023
  • Struggling to make a div appear on top

    1 project | /r/css | 24 Oct 2022
  • what theme is used on this website? is it available in vscode?

    1 project | /r/vscode | 6 Oct 2022
  • Any flutter package similar to Floating UI?

    2 projects | /r/FlutterDev | 29 Sep 2022