2019-10-20 16:59:02 +02:00
|
|
|
import React, { ReactNode } from "react";
|
|
|
|
|
import classNames from "classnames";
|
2019-10-19 16:38:07 +02:00
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
message: string;
|
|
|
|
|
className?: string;
|
|
|
|
|
location: string;
|
2019-10-20 16:59:02 +02:00
|
|
|
children: ReactNode;
|
2019-10-19 16:38:07 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
class Tooltip extends React.Component<Props> {
|
|
|
|
|
static defaultProps = {
|
2019-10-20 16:59:02 +02:00
|
|
|
location: "right"
|
2019-10-19 16:38:07 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const { className, message, location, children } = this.props;
|
2019-10-29 14:14:34 +01:00
|
|
|
const multiline = message.length > 60 ? "has-tooltip-multiline" : "";
|
2019-10-19 16:38:07 +02:00
|
|
|
return (
|
2019-10-29 14:14:34 +01:00
|
|
|
<span className={classNames("tooltip", "has-tooltip-" + location, multiline, className)} data-tooltip={message}>
|
2019-10-19 16:38:07 +02:00
|
|
|
{children}
|
|
|
|
|
</span>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Tooltip;
|