react-balloon-tooltip

Dead simple and straightforward tooltips on pure CSS on top of balloon.css

Demo

Check it out

Installation

npm i react-balloon-tooltip --save

You also need balloon-css library

1. You can install it via npm npm i balloon-css --save and then include somewhere in your code

2. Or 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