Menu

gitpiper

Tooltip react Code Snippet in 2023

componentsstatechildrenbeginner

Last Updated: 31 January 2023

Renders a tooltip component.

  • Use the useState() hook to create the show variable and initialize it to false.
  • Render a container element that contains the tooltip element and the children passed to the component.
  • Handle the onMouseEnter and onMouseLeave methods, by altering the value of the show variable, toggling the className of the tooltip.
.tooltip-container { position: relative; } .tooltip-box { position: absolute; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 5px; border-radius: 5px; top: calc(100% + 5px); display: none; } .tooltip-box.visible { display: block; } .tooltip-arrow { position: absolute; top: -10px; left: 50%; border-width: 5px; border-style: solid; border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent; }
const Tooltip = ({ children, text, ...rest }) => { const [show, setShow] = React.useState(false); return ( <div className="tooltip-container"> <div className={show ? 'tooltip-box visible' : 'tooltip-box'}> {text} <span className="tooltip-arrow" /> </div> <div onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)} {...rest} > {children} </div> </div> ); };
ReactDOM.render( <Tooltip text="Simple tooltip"> <button>Hover me!</button> </Tooltip>, document.getElementById('root') );

react snippet similar to Tooltip For You in February 2023

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2023 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️