README
react-balloon-tooltip
Dead simple and straightforward tooltips on pure CSS on top of balloon.css
Demo
Installation
npm i react-balloon-tooltip --save
You also need balloon-css library
You can install it via npm
npm i balloon-css --save
and then include somewhere in your codeOr include via CDN to your .html file
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.2.4/balloon.min.css">
Example
Using is pretty straightforward
import React, { Component } from 'react';
import Tooltip from '../index';
export default class App extends Component {
render() {
return (
<div>
<Tooltip text='React tooltip component' position='left'>
👈
</Tooltip>
<Tooltip text='Ridiculously simple' position='up'>
👆
</Tooltip>
<Tooltip text='On pure CSS' position='down'>
👇
</Tooltip>
<Tooltip text='Built on top of balloon.css' position='right'>
👉
</Tooltip>
</div>
);
}
}
NOTE! Include balloon.css first. Via npm library or in your html file.
Props
text
text you want to display in tooltip
position
position of tooltip, one of up
, down
, left
, right
default is up
Thanks
Thanks Claudio Holanda (@kazzkiq) for creating amazing balloon.css