2018-11-13 07:39:19 +01:00
|
|
|
//@flow
|
|
|
|
|
import * as React from "react";
|
|
|
|
|
import classNames from "classnames";
|
|
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
message: string,
|
2019-02-07 09:32:24 +01:00
|
|
|
className?: string,
|
|
|
|
|
location: string,
|
2018-11-13 07:39:19 +01:00
|
|
|
children: React.Node
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
class Tooltip extends React.Component<Props> {
|
2019-02-07 09:30:30 +01:00
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
|
location: "right"
|
|
|
|
|
};
|
|
|
|
|
|
2018-11-13 07:39:19 +01:00
|
|
|
render() {
|
2019-02-07 09:30:30 +01:00
|
|
|
const { className, message, location, children } = this.props;
|
2018-11-13 07:39:19 +01:00
|
|
|
const multiline = message.length > 60 ? "is-tooltip-multiline" : "";
|
|
|
|
|
return (
|
2019-02-07 09:30:30 +01:00
|
|
|
<span
|
|
|
|
|
className={classNames("tooltip", "is-tooltip-" + location, multiline, className)}
|
2018-11-13 07:39:19 +01:00
|
|
|
data-tooltip={message}
|
|
|
|
|
>
|
|
|
|
|
{children}
|
2019-02-07 09:30:30 +01:00
|
|
|
</span>
|
2018-11-13 07:39:19 +01:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Tooltip;
|