Defer hiding in 500ms for tooltips
parent
8d0649aca0
commit
7e694b41eb
|
@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
|
||||||
import Overlay from '../overlay';
|
import Overlay from '../overlay';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
class Tooltip extends React.Component {
|
const HIDE_TIMEOUT = 300;
|
||||||
|
|
||||||
|
class Tooltip extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
label: React.PropTypes.string
|
label: React.PropTypes.string
|
||||||
|
@ -18,23 +19,32 @@ class Tooltip extends React.Component {
|
||||||
active: false
|
active: false
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount = () => {
|
componentDidMount () {
|
||||||
|
this.parent = ReactDOM.findDOMNode(this).parentNode;
|
||||||
|
if (this.parent) {
|
||||||
|
this.parent.onmouseover = this.handleParentMouseOver;
|
||||||
|
this.parent.onmouseout = this.handleParentMouseOut;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleParentMouseOver = () => {
|
||||||
|
if (this.deferred) clearTimeout(this.deferred);
|
||||||
|
|
||||||
const node = ReactDOM.findDOMNode(this.refs.tooltip);
|
const node = ReactDOM.findDOMNode(this.refs.tooltip);
|
||||||
const parent = ReactDOM.findDOMNode(this).parentNode;
|
const parentStyle = this.parent.currentStyle || window.getComputedStyle(this.parent);
|
||||||
|
const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
|
||||||
|
const position = this.parent.getBoundingClientRect();
|
||||||
|
|
||||||
if (parent) {
|
node.style.top = `${position.top + position.height - offset}px`;
|
||||||
parent.onmouseover = () => {
|
node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
|
||||||
const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
|
if (!this.state.active) this.setState({ active: true});
|
||||||
const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
|
};
|
||||||
const position = parent.getBoundingClientRect();
|
|
||||||
|
|
||||||
node.style.top = `${position.top + position.height - offset}px`;
|
handleParentMouseOut = () => {
|
||||||
node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
|
if (this.state.active) {
|
||||||
if (!this.state.active) this.setState({ active: true});
|
this.deferred = setTimeout(() => {
|
||||||
};
|
this.setState({ active: false});
|
||||||
parent.onmouseout = () => {
|
}, HIDE_TIMEOUT);
|
||||||
if (this.state.active) this.setState({ active: false});
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue