react-balloon-tooltip/README.md

Dead simple tooltips on pure CSS

# react-balloon-tooltip

Dead simple and straightforward tooltips on pure CSS on top of [balloon.css](https://github.com/kazzkiq/balloon.css)

##Demo

[Check it out](https://krambertech.github.io/react-balloon-tooltip/)

## 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

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.2.4/balloon.min.css">
```

## Example

Using is pretty straightforward

```js
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](https://twitter.com/kazzkiq)) for creating amazing [balloon.css](https://github.com/kazzkiq/balloon.css)