All Projects → floating-ui → react-popper

floating-ui / react-popper

Licence: MIT license
🍿⚛Official React library to use Popper, the positioning library

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to react-popper

React Popper
🍿⚛Official React library to use Popper, the positioning library
Stars: ✭ 2,173 (-10.02%)
Mutual labels:  tooltips, popover, tooltip, popper, placement
react-popover
Customizable positioning for tooltips, menus, and any other DOM elements inside of a container
Stars: ✭ 13 (-99.46%)
Mutual labels:  popover, tooltip, placement
Easy Toggle State
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.
Stars: ✭ 261 (-89.19%)
Mutual labels:  tooltips, tooltip
React Layer Stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 152 (-93.71%)
Mutual labels:  popover, tooltip
Helipopper
🚁 A Powerful Tooltip and Popover for Angular Applications
Stars: ✭ 215 (-91.1%)
Mutual labels:  popover, tooltip
Cooltipz.css
A modern, highly customisable, minimal, pure CSS tooltip library
Stars: ✭ 81 (-96.65%)
Mutual labels:  tooltips, tooltip
React Popper Tooltip
A React hook to effortlessly build smart tooltips.
Stars: ✭ 149 (-93.83%)
Mutual labels:  popover, tooltip
Ember Tooltips
Easy and extendible tooltips for Ember components - http://sir-dunxalot.github.io/ember-tooltips/
Stars: ✭ 205 (-91.51%)
Mutual labels:  popover, tooltip
Ng Bootstrap
Angular powered Bootstrap
Stars: ✭ 7,872 (+225.96%)
Mutual labels:  popover, tooltip
Balloon
🎈 Modernized and sophisticated tooltips, fully customizable with an arrow and animations on Android.
Stars: ✭ 2,242 (-7.16%)
Mutual labels:  tooltips, tooltip
Zebra Tooltips
A lightweight, accessible, and highly configurable jQuery plugin for creating beautiful tooltips
Stars: ✭ 52 (-97.85%)
Mutual labels:  tooltips, tooltip
Html5tooltipsjs
Tooltips with smooth 3D animation
Stars: ✭ 892 (-63.06%)
Mutual labels:  tooltips, tooltip
Hibiscus.js
Native Angular directives for Bootstrap4
Stars: ✭ 115 (-95.24%)
Mutual labels:  popover, tooltip
Tippyjs
Tooltip, popover, dropdown, and menu library
Stars: ✭ 9,433 (+290.6%)
Mutual labels:  popover, tooltip
Tippyjs React
React component for Tippy.js (official)
Stars: ✭ 1,081 (-55.24%)
Mutual labels:  popover, tooltip
Popover
Angular CDK Popover, no default style, examples using @angular/material
Stars: ✭ 156 (-93.54%)
Mutual labels:  popover, tooltip
Ngx Popper
An angular wrapper for popper.js, great for tooltips and positioning popping elements
Stars: ✭ 183 (-92.42%)
Mutual labels:  tooltips, tooltip
React Laag
Hooks to build things like tooltips, dropdown menu's and popovers in React
Stars: ✭ 568 (-76.48%)
Mutual labels:  popover, tooltip
Sveltejs Tippy
Tippy.js for Svelte
Stars: ✭ 26 (-98.92%)
Mutual labels:  popover, tooltip
You Dont Need Javascript
CSS is powerful, you can do a lot of things without JS.
Stars: ✭ 16,514 (+583.81%)
Mutual labels:  popover, tooltip

React Popper

Unit Tests npm version npm downloads Dependency Status code style: prettier Get support or discuss

React wrapper around Popper.


⚠️ This library is in maintenance mode!

This library wraps @popperjs/core, not @floating-ui/dom.

To use the new Floating UI package with React, instead visit https://floating-ui.com/docs/react-dom.


Install

Via package managers:

# With npm
npm i react-popper @popperjs/core

# With Yarn
yarn add react-popper @popperjs/core

Note: @popperjs/core must be installed in your project in order for react-popper to work.

Via script tag (UMD library exposed as ReactPopper):

<script src="https://unpkg.com/react-popper/dist/index.umd.js"></script>

Documentation

The full documentation can be found on the official Popper website:

http://popper.js.org/react-popper

Running Locally

clone repo

git clone [email protected]:popperjs/react-popper.git

move into folder

cd ~/react-popper

install dependencies

npm install or yarn

run dev mode

npm run demo:dev or yarn demo:dev

open your browser and visit:

http://localhost:1234/

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].