https://github.com/fchristenson/fc-react-tooltip

Tooltip made in react
https://github.com/fchristenson/fc-react-tooltip

react tooltip

Last synced: about 2 months ago
JSON representation

Tooltip made in react

• Host: GitHub
• URL: https://github.com/fchristenson/fc-react-tooltip
• Owner: fChristenson
• License: mit
• Created: 2017-02-02T15:55:32.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-15T10:47:38.000Z (almost 8 years ago)
• Last Synced: 2024-04-28T19:21:05.334Z (9 months ago)
• Topics: react, tooltip
• Language: JavaScript
• Size: 480 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fc-react-tooltip

A tooltip component made in react.

The tooltip can be styled and figures out on it's own where to place itself 

based on the available screen space relative to the trigger element.

## Install

`npm install fc-react-tooltip`

## Demo

![Demo](demo.gif)

[Try the online example](https://fchristenson.github.io/fc-react-tooltip/)

## Usage

```

var ReactDOM = require('react-dom');

var React = require('react');

var Tooltip = require('fc-react-tooltip');

var Example = React.createClass({

  render: function() {

    return (

      


        Show Tooltip

        

        

            Hello World!

        

      

    );

  }

});


ReactDOM.render(, document.getElementById('container'));

```

Pass a unique selector for the element that will trigger the tooltip on click to the `selector` property.

You can set the inline styles for the tooltip by passing your styles in the `tooltipStyles` property.

You can also style the tooltip's overlay that covers the screen to catch the click that removes the tooltip by

passing styles to `overlayStyles`.

If you want to approach the styling using css use `.fc-overlay` and `.fc-tooltip` to do your styling.