https://github.com/springload/react-portal-popover
A popover library for React, using Portals for better positioning.
https://github.com/springload/react-portal-popover
popover react react-portal
Last synced: 5 months ago
JSON representation
A popover library for React, using Portals for better positioning.
- Host: GitHub
- URL: https://github.com/springload/react-portal-popover
- Owner: springload
- License: mit
- Created: 2016-08-13T23:38:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-19T15:22:53.000Z (about 7 years ago)
- Last Synced: 2024-11-10T08:03:49.698Z (6 months ago)
- Topics: popover, react, react-portal
- Language: JavaScript
- Homepage: https://springload.github.io/react-portal-popover/
- Size: 92.8 KB
- Stars: 21
- Watchers: 20
- Forks: 6
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-portal-popover
[](https://www.npmjs.com/package/react-portal-popover) [](https://travis-ci.org/springload/react-portal-popover) [](https://david-dm.org/springload/react-portal-popover) [](https://david-dm.org/springload/react-portal-popover#info=devDependencies) [](https://codeclimate.com/github/springload/react-portal-popover)
A popover library for React, using [react-portal](https://github.com/tajo/react-portal) for better positioning.
## Installation
```
npm install react-portal-popover
```
## Usage
There's two steps: import the `OverlayTrigger` that decorates your toggle element,
then pass in an `overlay={}` prop with your `ToolTip` that you'd like to display.
```js
import React from 'react';
import ToolTip, { OverlayTrigger } from 'react-portal-popover';
const MyComponent = () => {
const options = {
size: 7,
color: '#999',
foregroundColor: '#fff',
className: 'my-special-tooltip',
useForeground: true,
};
const toolTip = (
My tooltip content
);
return (
Toggle
);
};
```
### Configuration options
There are some options you can pass to the `ToolTip` component to customise how
it is displayed. This allows you to define multiple styles of tooltip in the same
application, and saves writing lots of the CSS boilerplate required for drawing arrows.
```js
const options = {
classBase: 'tooltip', // eg .${classBase}--bottom,
className: '', // extra classnames to add to the tooltip element
size: 7, // the size of the arrow
offset: 2, // how many pixels to offset the arrow by
color: '#999', // border colour of your tooltip
foregroundColor: '#fff', // foreground colour of your tooltip
useForeground: true, // render two arrows, a border and a background.
borderWidth: 1, // pixel width of your border
};
```
### OverlayTrigger options
`closeOnScroll` determines whether the tooltip closes when you scroll the window.
```
```
## Developing
```sh
nvm install
npm install
```
## Running tests
```js
npm test
npm run test:watch
npm run lint
```