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> ); } }; }
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> ); }
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
No comments:
Post a Comment