use span for tooltip and added an option to change tooltip location

This commit is contained in:
Sebastian Sdorra
2019-02-07 09:30:30 +01:00
parent 9cb1c24567
commit c5511af448

View File

@@ -5,20 +5,26 @@ import classNames from "classnames";
type Props = { type Props = {
message: string, message: string,
className: string, className: string,
location?: string,
children: React.Node children: React.Node
}; };
class Tooltip extends React.Component<Props> { class Tooltip extends React.Component<Props> {
static defaultProps = {
location: "right"
};
render() { render() {
const { className, message, children } = this.props; const { className, message, location, children } = this.props;
const multiline = message.length > 60 ? "is-tooltip-multiline" : ""; const multiline = message.length > 60 ? "is-tooltip-multiline" : "";
return ( return (
<div <span
className={classNames("tooltip", "is-tooltip-right", multiline, className)} className={classNames("tooltip", "is-tooltip-" + location, multiline, className)}
data-tooltip={message} data-tooltip={message}
> >
{children} {children}
</div> </span>
); );
} }
} }