1
0
Fork 0
web2019/static/js/shop/options/Notification.jsx

26 lines
843 B
JavaScript

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>
)
}