React :: Tooltip

Renders a tooltip component.

Use the React.useState() hook to create the show variable and initialize it to false. Return a <div> element that contains the <div> that will be the tooltip and the children passed to the component. Handle the onMouseEnter and onMouseLeave methods, by altering the value of the show variable.

.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  visibility: hidden;
  padding: 5px;
  border-radius: 5px;
.tooltip-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.7) transparent transparent;
function Tooltip({ children, text, }) {
  const [show, setShow] = React.useState(false);

  return (
      <div className="tooltip" style={show ? { visibility: "visible" } : {}}>
        <span className="tooltip-arrow" />
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
     <Tooltip text='Simple tooltip'>
       <button>Hover me!</button>

Leave a Reply

Your email address will not be published. Required fields are marked *