react-tooltip

react-tooltip

React tooltip component, inspired by tooltipsy (a jquery plugin I've used)

Installation

npm install react-tooltip --save

Usage

1 . Require react-tooltip after installation

var ReactTooltip = require("react-tooltip")

2 . Include css or scss file(you can find the file in dist folder) into your project

sass: @import "react-tooltip";

3 . Add data-placeholder = "your placeholder" to your element

<p data-placeholder="hello world">Tooltip</p>

4 . Including react-tooltip component

<ReactTooltip />

Example

http://wwayne.github.io/react-tooltip

'use strict';

var React = require("react");
var ReactTooltip = require("../index");

var Index = React.createClass({
  render: function() {
    return (
      <section className="tooltip-example">
        <p data-placeholder="foo">hover on me</p>
        <p data-placeholder="This is another hover test" data-place="bottom">Tooltip from bottom</p>
        <ReactTooltip />
      </section>
    )
  }
});

React.render(<Index />,document.body)

License

MIT

Similar packages

Other packages similar to react-tooltip

tippy.js

Tippy.js is a highly customizable tooltip and popover library powered by Popper.js. It offers a wide range of options and plugins for creating interactive tooltips and popovers. Compared to react-tooltip, Tippy.js provides more out-of-the-box animations and is not limited to React.

rc-tooltip

Rc-tooltip is a React component for tooltip functionality. It is part of the rc-components family and offers a simple API for creating and managing tooltips. While react-tooltip is more feature-rich and has a larger community, rc-tooltip is a good alternative for those already using other rc-components.

react-tippy

React-tippy is a React wrapper for Tippy.js, bringing its powerful tooltip capabilities to React applications. It combines the extensive features of Tippy.js with a React-friendly interface. React-tippy may be preferred by developers who want the advanced features of Tippy.js in a React-specific package.