React Tooltip Component published in NPM

Tooltip could be create with pure CSS, that's the example:

Such an awesome tooltip!

https://jsfiddle.net/AndrewBuntsev/jxk75o6c/

But I decided to go further and create a react component and publish it at NPM so that it could be reusable it other applications. That's the component HOC function implementation:

  
import React from "react";
import "./Tooltip.css";

export function tooltip(InnerComponent, options) {
  return class extends React.Component {
    render() {
      return (
        <div className="react-fancy-components-tooltip-container">
          <span className="tooltiptext" style={options.style}>
            {options.text}
          </span>
          {InnerComponent}
        </div>
      );
    }
  };
}

1. import React from "react";
2. import "./Tooltip.css";
4. export function tooltip(InnerComponent, options) {
5. return class extends React.Component {
6. render() {
7. return (
8. <div className="react-fancy-components-tooltip-container">
9. <span className="tooltiptext" style={options.style}>
10. {options.text}
11. </span>
12. {InnerComponent}
13. </div>
14. );
15. }
16. };
17. }

import React from "react";
import "./Tooltip.css";

export function tooltip(InnerComponent, options) {
  return class extends React.Component {
    render() {
      return (
        <div className="react-fancy-components-tooltip-container">
          <span className="tooltiptext" style={options.style}>
            {options.text}
          </span>
          {InnerComponent}
        </div>
      );
    }
  };
}

That's how we can use the tooltip function in another component:

  
import { tooltip } from "./components/tooltip/Tooltip";

function App() {
  let TooltippedComponent = tooltip(<input />, {
    text: "Awesome tooltip!!",
    style: {
      fontWeight: "bold"
    }
  });
  return (
    <div className="App">
      <TooltippedComponent />
    </div>
  );
}

1. import { tooltip } from "./components/tooltip/Tooltip";
3. function App() {
4. let TooltippedComponent = tooltip(<input />, {
5. text: "Awesome tooltip!!",
6. style: {
7. fontWeight: "bold"
8. }
9. });
10. return (
11. <div className="App">
12. <TooltippedComponent />
13. </div>
14. );
15. }

import { tooltip } from "./components/tooltip/Tooltip";

function App() {
  let TooltippedComponent = tooltip(<input />, {
    text: "Awesome tooltip!!",
    style: {
      fontWeight: "bold"
    }
  });
  return (
    <div className="App">
      <TooltippedComponent />
    </div>
  );
}

If you you need a guide how to publish react components to NPM, follow this https://github.com/AndrewBuntsev/react-component-publish
Or if you just need this component you can install it from NPM https://www.npmjs.com/package/react-fancy-components
Its code on github https://github.com/AndrewBuntsev/react-fancy-components