https://github.com/robertmenke/react-popover
Customizable positioning for tooltips, menus, and any other DOM elements inside of a container
https://github.com/robertmenke/react-popover
placement popover positioning react tooltip web
Last synced: about 1 year ago
JSON representation
Customizable positioning for tooltips, menus, and any other DOM elements inside of a container
- Host: GitHub
- URL: https://github.com/robertmenke/react-popover
- Owner: RobertMenke
- Created: 2017-05-27T20:47:51.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-02-11T16:23:17.000Z (over 8 years ago)
- Last Synced: 2025-04-07T15:52:58.203Z (about 1 year ago)
- Topics: placement, popover, positioning, react, tooltip, web
- Language: JavaScript
- Size: 3.61 MB
- Stars: 13
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Why this positioning library?
Many positioning libraries in an effort to be simple assume static positioning and have no sense of the container they get
appended to (often the document's body).
I wanted to build a positioning component that could handle relative and absolute positioned
containers, could scroll with its container, could be used as a general-purpose positioning mechanism, and was dead-simple
to use.
If you like the way the library has been written, or find it useful in your own project don't forget to star it!
# Installation
yarn
```
yarn add rm-react-popover
```
npm
```
npm install rm-react-popover --save
```
# Usage
```javascript
import React, { Component } from "react"
import Popover from "rm-react-popover"
//Then, inside of your components render method
class Example extends Component {
render() {
return (
I was called with placement="auto"
)
}
}
```
rm-react-tooltip does not come with any css applied out of the box. This is intentional as this is intended to be a general-purpose positioning library that can accept arbitrary markup as children of the component.
I have an example of what the styling of a tooltip might look like in the src folder, and it's also the stylesheet used in the example folder.
Every placement option has a corollary css class that gets applied, so that you can intelligently style your component based on its position. That mapping looks like this.
```
top = TooltipAbove
bottom = TooltipBelow
right = TooltipRight
left = TooltipLeft
element_right = TooltipAlignRight
element_left = TooltipAlignLeft
auto = autoplace
```
# Props
It may be helpful to look at the flow type definition for the component's props
```javascript
type Props = {
element : HTMLElement,
parent : HTMLElement,
placement : string | Array,
open : boolean,
classes : ?string | ?Array,
left_cushion : ?number,
top_cushion : ?number,
children : Array
}
```
# Dependencies
For obvious reasons:
- React
- React DOM
# Webpack build instructions
I use one webpack configuration to build the library and a second configuration to build out the example.
Building the library: `npm start`
Building the example: `npm run build-example`
Both `example.webpack.config.js` and `webpack.config.js` define a variable called `is_production` at the top of the file. This variable controls which plugins get loaded. It may be helpful while developing to set this variable to false in order to use source maps in the browser.