67 lines
1.4 KiB
JavaScript
67 lines
1.4 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import ReactTooltip from 'react-tooltip';
|
|
import ReactHtmlParser from 'react-html-parser';
|
|
|
|
function Tooltip(props) {
|
|
let tooltipId = props.tooltipId;
|
|
let tooltip = props.tooltip;
|
|
// tooltip ID must be unique, defaults to tooltip text
|
|
if (!props.tooltipId && typeof props.tooltip === 'string') {
|
|
tooltipId = props.tooltip;
|
|
}
|
|
|
|
if (typeof props.tooltip === 'string') {
|
|
tooltip = (
|
|
<span
|
|
style={{
|
|
pointerEvents: 'all',
|
|
maxWidth: '400px',
|
|
display: 'inline-block',
|
|
}}
|
|
>
|
|
{ReactHtmlParser(props.tooltip)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<span className={props.className}>
|
|
<span
|
|
style={{
|
|
cursor: 'pointer',
|
|
}}
|
|
className="tooltip dashicons dashicons-editor-help"
|
|
data-event="click"
|
|
data-tip
|
|
data-for={tooltipId}
|
|
/>
|
|
<ReactTooltip
|
|
globalEventOff="click"
|
|
className="mailpoet-tooltip-message"
|
|
multiline
|
|
id={tooltipId}
|
|
efect="solid"
|
|
place={props.place}
|
|
>
|
|
{tooltip}
|
|
</ReactTooltip>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
Tooltip.propTypes = {
|
|
tooltipId: PropTypes.string,
|
|
tooltip: PropTypes.node.isRequired,
|
|
place: PropTypes.string,
|
|
className: PropTypes.string,
|
|
};
|
|
|
|
Tooltip.defaultProps = {
|
|
tooltipId: undefined,
|
|
place: undefined,
|
|
className: undefined,
|
|
};
|
|
|
|
export default Tooltip;
|