React Popper Spring Tooltip
Warning: This project was an experiement and has ceased development.
Tooltips powered by react-popper and react-spring.
Demo
Install
Via package managers:
npm install react-popper-spring-tooltip --save# or yarn add react-popper-spring-tooltip
Usage
Examples
Let's start with a simple example:
Wrap your Tooltip
component around an on / off Toggle.
<Tooltip ="click" ="bottom" => ...bind <button >Toggle</button></Tooltip>
Spreading bind
will pass you the reference provided by react-popper
and EventListeners to open / close the tooltip content.
react-popper-spring-tooltip
makes use of a React pattern called "render prop", if you are not familiar with it, please read more on the official React documentation.
In more advanced use cases you may pass your Components via the content
prop. You can also pass your own react-spring
config to make awesome custom animations. Also note that you can destructure the isOpen
prop to add conditions to your Toggle.
<Tooltip ="click" ="bottom" = => isOpen ...bind <button = > Toggle </button> </Tooltip>
Props
children
(props) => ReactNode
| required
The Tooltip
component must be wrapped around a function that renders your Toggle.
content
string | React.Element
| required
The content of the Tooltip.
placement
string
| required
The Tooltip placement. Valid placements are:
auto
top
bottom
left
right
Each placement can have a variation from this list:
-start
-end
trigger
string
| required
The Tooltip trigger action. Valid actions are:
click
hover
context
closeOnClickOutside
boolean
| defaults totrue
Will determine whether or not to close the Tooltip by clicking outside the Trigger.
init
boolean
| defaults tofalse
Will set the initial open (true) and closed (false) state.
springConfig
object
| defaults to:
from: opacity: 0 to: opacity: 1
Define the CSS using from
and to
keys.
If you are new to react-spring
check out their docs.
TypeScript
This library is built with TypeScript and will automatically generate typing during the Rollup build process in: dist/Tooltip.d.ts
Local Development
clone repo
git clone https://github.com/impulse/react-popper-spring-tooltip.git
cd into folder
cd react-popper-spring-tooltip
install dependencies
npm install
or yarn
run dev mode
npm run watch
or yarn watch