2022-06-03 20:52:37 +00:00
|
|
|
import variables from 'modules/variables';
|
2022-10-30 16:56:26 +00:00
|
|
|
import { useState, memo } from 'react';
|
2022-04-08 13:48:36 +00:00
|
|
|
import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
|
2022-04-28 22:22:58 +00:00
|
|
|
import { MdClose, MdInfo, MdOpenInNew } from 'react-icons/md';
|
2022-06-03 20:52:37 +00:00
|
|
|
import Tooltip from './Tooltip';
|
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
import './tooltip.scss';
|
|
|
|
|
2022-10-30 16:56:26 +00:00
|
|
|
function InfoTooltip({ title, style, placement, subtitle }) {
|
2022-04-28 22:22:58 +00:00
|
|
|
const [showTooltip, setShowTooltip] = useState(false);
|
2022-04-08 13:48:36 +00:00
|
|
|
const { x, y, reference, floating, strategy } = useFloating({
|
2022-04-28 22:22:58 +00:00
|
|
|
placement: placement || 'top-start',
|
|
|
|
middleware: [flip(), offset(10), shift()],
|
2022-04-08 13:48:36 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
2022-04-28 22:22:58 +00:00
|
|
|
<div className="infoTooltip" style={style} ref={reference}>
|
|
|
|
<MdInfo onClick={() => setShowTooltip(true)} />
|
2022-04-08 13:48:36 +00:00
|
|
|
{showTooltip && (
|
|
|
|
<div
|
|
|
|
ref={floating}
|
|
|
|
style={{
|
|
|
|
position: strategy,
|
|
|
|
top: y ?? '',
|
|
|
|
left: x ?? '',
|
|
|
|
}}
|
2022-04-28 22:22:58 +00:00
|
|
|
className="infoTooltipTitle"
|
2022-04-08 13:48:36 +00:00
|
|
|
>
|
2022-04-28 22:22:58 +00:00
|
|
|
<div className="tooltipHeader">
|
|
|
|
<span className="title">{title}</span>
|
2022-08-26 09:45:32 +00:00
|
|
|
<Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
|
2022-04-28 22:22:58 +00:00
|
|
|
<div className="close" onClick={() => setShowTooltip(false)}>
|
|
|
|
<MdClose />
|
|
|
|
</div>
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
2022-05-11 15:09:26 +00:00
|
|
|
<span className="subtitle">{subtitle}</span>
|
|
|
|
<span className="link">
|
2022-08-26 09:45:32 +00:00
|
|
|
{variables.getMessage('modals.main.settings.open_knowledgebase')} <MdOpenInNew />
|
2022-05-11 15:09:26 +00:00
|
|
|
</span>
|
2022-04-08 13:48:36 +00:00
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2022-10-30 16:56:26 +00:00
|
|
|
|
2022-11-06 11:59:59 +00:00
|
|
|
export default memo(InfoTooltip);
|