import {OverlayTrigger, Tooltip} from "react-bootstrap"; import React, {useState} from "react"; export function Notification({id, tip, content}) { const [show, setShow] = useState(true); const onClickHandler = (event) => { // prevent removing badge on touchables if (!event.target.classList.contains("options-badge")) setShow(false); }; return ( <div className="options-notification" onClick={onClickHandler}> {content} {show ? <OverlayTrigger placement="auto" trigger={['click', 'hover', 'focus']} style={{display: 'inline'}} overlay={<Tooltip id={id}>{tip}</Tooltip>} > <span className="options-badge"></span> </OverlayTrigger> : null} </div> ) }