2019-10-07 11:39:21 +00:00
|
|
|
import PropTypes from "prop-types";
|
2023-09-06 10:27:24 +00:00
|
|
|
import React from "react";
|
2023-09-05 09:15:29 +00:00
|
|
|
import { Tooltip as ReactTooltip } from "react-tooltip";
|
|
|
|
|
2021-10-29 11:24:48 +00:00
|
|
|
import Portal from "../portal";
|
2021-02-05 11:10:15 +00:00
|
|
|
import StyledTooltip from "./styled-tooltip";
|
2023-09-05 11:57:31 +00:00
|
|
|
import { flip, shift, offset } from "@floating-ui/dom";
|
2023-09-05 10:34:57 +00:00
|
|
|
|
2023-09-08 07:55:54 +00:00
|
|
|
const defaultOffset = 4;
|
2023-09-06 10:27:24 +00:00
|
|
|
const Tooltip = (props) => {
|
|
|
|
const {
|
|
|
|
id,
|
|
|
|
place,
|
|
|
|
getContent,
|
|
|
|
children,
|
|
|
|
afterShow,
|
|
|
|
afterHide,
|
|
|
|
className,
|
|
|
|
style,
|
|
|
|
color,
|
|
|
|
maxWidth,
|
|
|
|
anchorSelect,
|
|
|
|
clickable,
|
|
|
|
openOnClick,
|
|
|
|
isOpen,
|
|
|
|
float,
|
2023-09-08 07:55:54 +00:00
|
|
|
noArrow = true,
|
2023-09-06 10:27:24 +00:00
|
|
|
} = props;
|
2019-10-07 11:39:21 +00:00
|
|
|
|
2023-09-06 10:27:24 +00:00
|
|
|
const renderTooltip = () => (
|
|
|
|
<StyledTooltip
|
|
|
|
theme={props.theme}
|
|
|
|
className={className}
|
|
|
|
style={style}
|
|
|
|
color={color}
|
|
|
|
maxWidth={maxWidth}
|
|
|
|
>
|
|
|
|
<ReactTooltip
|
|
|
|
id={id}
|
|
|
|
float={float}
|
2023-09-08 07:55:54 +00:00
|
|
|
place={place}
|
2023-09-06 10:27:24 +00:00
|
|
|
closeOnScroll
|
|
|
|
closeOnResize
|
2023-09-08 07:55:54 +00:00
|
|
|
isOpen={isOpen}
|
|
|
|
noArrow={noArrow}
|
2023-09-06 10:27:24 +00:00
|
|
|
render={getContent}
|
|
|
|
clickable={clickable}
|
|
|
|
afterShow={afterShow}
|
|
|
|
afterHide={afterHide}
|
2023-09-08 07:55:54 +00:00
|
|
|
offset={props.offset}
|
2023-09-06 10:27:24 +00:00
|
|
|
positionStrategy="fixed"
|
|
|
|
openOnClick={openOnClick}
|
|
|
|
anchorSelect={anchorSelect}
|
|
|
|
className="__react_component_tooltip"
|
|
|
|
middlewares={[
|
|
|
|
offset(props.offset ?? defaultOffset),
|
|
|
|
flip({
|
|
|
|
crossAxis: false,
|
|
|
|
fallbackAxisSideDirection: place,
|
|
|
|
}),
|
|
|
|
shift(),
|
|
|
|
]}
|
2021-10-28 12:06:43 +00:00
|
|
|
>
|
2023-09-06 10:27:24 +00:00
|
|
|
{children}
|
|
|
|
</ReactTooltip>
|
|
|
|
</StyledTooltip>
|
|
|
|
);
|
2021-10-29 11:24:48 +00:00
|
|
|
|
2023-09-06 10:27:24 +00:00
|
|
|
const tooltip = renderTooltip();
|
2021-10-29 11:24:48 +00:00
|
|
|
|
2023-09-06 10:27:24 +00:00
|
|
|
return <Portal element={tooltip} />;
|
|
|
|
};
|
2019-10-07 11:39:21 +00:00
|
|
|
|
|
|
|
Tooltip.propTypes = {
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Used as HTML id property */
|
2019-10-08 08:42:12 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Global tooltip placement */
|
2019-10-08 08:42:12 +00:00
|
|
|
place: PropTypes.oneOf(["top", "right", "bottom", "left"]),
|
2023-04-18 10:08:31 +00:00
|
|
|
/** Sets a callback function that generates the tip content dynamically */
|
2019-10-08 12:00:27 +00:00
|
|
|
getContent: PropTypes.func,
|
2023-04-21 10:58:15 +00:00
|
|
|
/** A function to be called after the tooltip is hidden */
|
2019-10-17 10:53:11 +00:00
|
|
|
afterHide: PropTypes.func,
|
2023-04-21 10:58:15 +00:00
|
|
|
/** A function to be called after the tooltip is shown */
|
2019-10-17 10:53:11 +00:00
|
|
|
afterShow: PropTypes.func,
|
2023-09-07 14:13:22 +00:00
|
|
|
/** Space between the tooltip element and anchor element (arrow not included in calculation) */
|
2023-09-05 10:34:57 +00:00
|
|
|
offset: PropTypes.number,
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Child elements */
|
2019-10-17 12:49:01 +00:00
|
|
|
children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Accepts class */
|
2019-12-03 13:55:43 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Accepts css style */
|
2020-10-16 13:16:01 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2023-04-21 10:58:15 +00:00
|
|
|
/** Background color of the tooltip */
|
2021-06-09 01:02:28 +00:00
|
|
|
color: PropTypes.string,
|
2023-04-21 10:58:15 +00:00
|
|
|
/** Maximum width of the tooltip */
|
2021-10-28 12:06:43 +00:00
|
|
|
maxWidth: PropTypes.string,
|
2023-09-07 14:13:22 +00:00
|
|
|
/** The tooltip can be controlled or uncontrolled, this attribute cannot be used to handle show and hide tooltip outside tooltip */
|
2023-09-06 10:27:24 +00:00
|
|
|
isOpen: PropTypes.bool,
|
2023-09-07 14:13:22 +00:00
|
|
|
/** Allow interaction with elements inside the tooltip */
|
2023-09-06 10:27:24 +00:00
|
|
|
clickable: PropTypes.bool,
|
2023-09-07 14:13:22 +00:00
|
|
|
/** Controls whether the tooltip should open when clicking (true) or hovering (false) the anchor element */
|
2023-09-06 10:27:24 +00:00
|
|
|
openOnClick: PropTypes.bool,
|
2023-09-07 14:13:22 +00:00
|
|
|
/** Tooltip will follow the mouse position when it moves inside the anchor element */
|
2023-09-06 10:27:24 +00:00
|
|
|
float: PropTypes.bool,
|
2023-09-07 14:13:22 +00:00
|
|
|
/** The selector for the anchor elements */
|
2023-09-06 10:27:24 +00:00
|
|
|
anchorSelect: PropTypes.string,
|
2023-09-08 07:55:54 +00:00
|
|
|
/** Tooltip arrow will not be shown */
|
|
|
|
noArrow: PropTypes.bool,
|
2019-10-07 11:39:21 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
Tooltip.defaultProps = {
|
|
|
|
place: "top",
|
2023-09-08 07:55:54 +00:00
|
|
|
noArrow: true,
|
2019-10-07 11:39:21 +00:00
|
|
|
};
|
|
|
|
|
2020-01-24 07:26:35 +00:00
|
|
|
export default Tooltip;
|