/** @module react-aiot/components/Tooltip */
import Popover from 'antd/lib/popover';
import 'antd/lib/popover/style/index.css';
/**
* Custom All-In-One Tree tooltip implementation with the help of antd-design.
*
* @param {object} props Properties
* @param {string} [props.placement='bottom'] The placement
* @param {React.Element|string} [props.children] The children which should get the tooltip
* @param {React.Element|string} [props.title] The tooltip title
* @param {React.Element|string} [props.content] The tooltip content
* @param {float} [props.mouseEnterDelay=0.2] The mouse enter delay
* @param {float} [props.mouseLeaveDelay=0] The mouse leave delay
* @see https://ant.design/components/popover/
*/
export default ({
placement = 'bottom',
children,
title,
content,
mouseEnterDelay = 0.2,
mouseLeaveDelay = 0,
...rest
}) => {
const popoverContent = <div style={{ fontSize: 12, maxWidth: 200 }}>
<div style={{ fontWeight: 'bold', fontSize: 14, paddingBottom: 5, marginBottom: 3, borderBottom: '1px solid rgba(255,255,255,0.3)' }}>{ title }</div>
{ content }
</div>;
return <Popover content={ popoverContent } placement={ placement } mouseEnterDelay={ mouseEnterDelay }
mouseLeaveDelay={ mouseLeaveDelay } {...rest}>
{ children }
</Popover>;
};