vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Defer hiding in 500ms for tooltips

old
Javi Velasco 2015-11-15 18:31:01 +01:00
parent 8d0649aca0
commit 7e694b41eb
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/tooltip/index.jsx
View File

@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
import Overlay from '../overlay';
import style from './style';
class Tooltip extends React.Component {
const HIDE_TIMEOUT = 300;
class Tooltip extends React.Component {
static propTypes = {
className: React.PropTypes.string,
label: React.PropTypes.string
@ -18,23 +19,32 @@ class Tooltip extends React.Component {
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 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) {
parent.onmouseover = () => {
const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
const position = parent.getBoundingClientRect();
node.style.top = `${position.top + position.height - offset}px`;
node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
if (!this.state.active) this.setState({ active: true});
};
node.style.top = `${position.top + position.height - offset}px`;
node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
if (!this.state.active) this.setState({ active: true});
};
parent.onmouseout = () => {
if (this.state.active) this.setState({ active: false});
};
handleParentMouseOut = () => {
if (this.state.active) {
this.deferred = setTimeout(() => {
this.setState({ active: false});
}, HIDE_TIMEOUT);
}
};