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

Get real height of parent

old
@soyjavi 2015-11-15 12:13:05 +07:00
parent 9aca75a1d7
commit bacb02b8e4
3 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/tooltip/_config.scss
View File

@ -1,4 +1,5 @@
$tooltip-background: rgba(97,97,97,.9);
$tooltip-margin: 0.5 * $unit;
$tooltip-border-radius: .2 * $unit;
$tooltip-color: #fff;
$tooltip-font-size: $unit;

4
components/tooltip/index.jsx
View File

@ -22,8 +22,10 @@ class Tooltip extends React.Component {
const parent = node.parentNode;
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}px`;
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});
};

5
components/tooltip/style.scss
View File

@ -7,8 +7,8 @@
z-index: $z-index-higher;
display: inline-block;
max-width: $tooltip-max-width;
margin-top: 10px;
padding: $tooltip-padding;
margin: $tooltip-margin 0;
font-size: $font-size-tiny;
font-size: $tooltip-font-size;
font-weight: $font-weight-bold;
@ -27,10 +27,9 @@
animation-name: tooltip-animation;
}
&.large {
font-size: $font-size-small;
padding: 2 * $tooltip-padding;
font-size: $font-size-small;
}
@keyframes tooltip-animation {
0% {
transform: scale(0);