make tooltip smarter
This commit is contained in:
parent
b972064f1c
commit
d6cfc8d5fc
1 changed files with 62 additions and 1 deletions
|
@ -16,8 +16,66 @@ class ToolTip extends React.PureComponent<Props> {
|
|||
direction: 'bottom',
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.tooltip = React.createRef();
|
||||
this.state = {
|
||||
direction: this.props.direction,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.handleVisibility();
|
||||
}
|
||||
|
||||
getVisibility = () => {
|
||||
const node = this.tooltip.current;
|
||||
const rect = node.getBoundingClientRect();
|
||||
|
||||
// Get parent-container
|
||||
const viewport = document.getElementById('content');
|
||||
|
||||
const visibility = {
|
||||
top: rect.top >= 0,
|
||||
left: rect.left >= 0,
|
||||
right: rect.right <= viewport.offsetWidth,
|
||||
bottom: rect.bottom <= viewport.offsetHeight,
|
||||
};
|
||||
|
||||
return visibility;
|
||||
};
|
||||
|
||||
invertDirection = () => {
|
||||
// Get current direction
|
||||
const { direction } = this.state;
|
||||
// Inverted directions
|
||||
const directions = {
|
||||
top: 'bottom',
|
||||
left: 'right',
|
||||
right: 'left',
|
||||
bottom: 'top',
|
||||
};
|
||||
|
||||
const inverted = directions[direction];
|
||||
|
||||
// Update direction
|
||||
if (inverted) {
|
||||
this.setState({ direction: inverted });
|
||||
}
|
||||
};
|
||||
|
||||
handleVisibility = () => {
|
||||
const { direction } = this.state;
|
||||
const visibility = this.getVisibility();
|
||||
|
||||
if (!visibility[direction]) {
|
||||
this.invertDirection();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, label, body, icon, direction, onComponent } = this.props;
|
||||
const { direction } = this.state;
|
||||
const { children, label, body, icon, onComponent } = this.props;
|
||||
|
||||
const tooltipContent = children || label;
|
||||
const bodyLength = body.length;
|
||||
|
@ -25,6 +83,8 @@ class ToolTip extends React.PureComponent<Props> {
|
|||
|
||||
return (
|
||||
<span
|
||||
onFocus={this.handleVisibility}
|
||||
onMouseOver={this.handleVisibility}
|
||||
className={classnames('tooltip', {
|
||||
'tooltip--label': label && !icon,
|
||||
'tooltip--icon': icon,
|
||||
|
@ -37,6 +97,7 @@ class ToolTip extends React.PureComponent<Props> {
|
|||
>
|
||||
{tooltipContent}
|
||||
<span
|
||||
ref={this.tooltip}
|
||||
className={classnames('tooltip__body', {
|
||||
'tooltip__body--short': isShortDescription,
|
||||
})}
|
||||
|
|
Loading…
Reference in a new issue