React tooltip, focused on simplicity and performance
npm install @wowanalyzer/react-tooltip-liteA lightweight and responsive tooltip. Feel free to Post an issue if you're looking to support more use cases.
#### 1. Install with NPM
``
$ npm install react-tooltip-lite
#### 2. Import into your react Component
`
import Tooltip from 'react-tooltip-lite';
#### 3. Wrap any element with the Tooltip component to make it a target
`
edge
CodePen demo: http://codepen.io/bsidelinger912/pen/WOdPNK
#### Important note about contents
@wowanalyzer/react-tooltip-lite needs a single element to attach to. This element can be either:
1. React component ( for example, or your custom components)
2. HTML elements like
It cannot be a
because then it won't have a target to attach to. In the same sense, it can't be a plain text or text mixed with other JSX, then it needs a wrapper element. If you wish to put a tooltip on a custom React component, you need to make sure it spreads other properties and sets
ref property on some element, like here:
`javascript
class SomeComponent extends React.Component {
render() {
const { innerRef, ...others } = this.props;
return (
ref={innerRef}
{...others}
>
Hello
` needs to be specifically deconstructed from this.props and set as a ref parameter on some element, same with ...others (it contains the mouseover/toggle events for the tooltip).
Alternatively, you can wrap the component in
or element.
$3
By default you need to style react-tooltip-lite with CSS, this allows for psuedo elements and some cool border tricks, as well as using css/sass/less variables and such to keep your colors consistent. (Note: as of version 1.2.0 you can also pass the "useDefaultStyles" prop which will allow you to use react-tooltip-lite without a stylesheet.) Since the tooltip's arrow is created using the css border rule (https://css-tricks.com/snippets/css/css-triangle/), you'll want to specify the border-color for the arrow to set it's color.
#### Here's an example stylesheet:
`
.react-tooltip-lite {
background: #333;
color: white;
}.react-tooltip-lite-arrow {
border-color: #333;
}
For more examples, see the CodePen demo: http://codepen.io/bsidelinger912/pen/WOdPNK.Props
You can pass in props to define tip direction, styling, etc. Content is the only required prop.
Name
Type
Description
content
node (text or html)
the contents of your hover target
direction
string
the tip direction, defaults to up. Possible values are "up", "down", "left", "right" with optional modifer for alignment of "start" and "end". e.g. "left-start" will attempt tooltip on left and align it with the start of the target. If alignment modifier is not specified the default behavior is to align "middle".
className
string
css class added to the rendered tooltip
background
string
background color for the tooltip contents and arrow
color
string
text color for the tooltip contents
padding
string
padding amount for the tooltip contents (defaults to '10px')
eventOn
string
full name of supported react event to show the tooltip, e.g.: 'onClick'
eventOff
string
full name of supported react event to hide the tooltip, e.g.: 'onClick'
eventToggle
string
full name of supported react event to toggle the tooltip, e.g.: 'onClick', default hover toggling is disabled when using this option
useHover
boolean
whether to use hover to show/hide the tip, defaults to true
useDefaultStyles
boolean
uses default colors for the tooltip, so you don't need to write any CSS for it
isOpen
boolean
forces open/close state from a prop, overrides hover or click state
tipContentHover
boolean
defines whether you should be able to hover over the tip contents for links and copying content,
defaults to false.
hoverDelay
number
the number of milliseconds to determine hover intent, defaults to 0
arrow
boolean
Whether or not to have an arrow on the tooltip, defaults to true
arrowSize
number
Number in pixels of the size of the arrow, defaults to 10
distance
number
The distance from the tooltip to the target, defaults to 10px with an arrow and 3px without an arrow
$3
An unordered list to demo some html content
- One
- Two
- Three
- Four
- Five
)}
direction="right"
>
Target content for big html tip
To see more usage examples, take look at the /example folder in the source.