Get real height of parent
parent
9aca75a1d7
commit
bacb02b8e4
|
@ -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;
|
||||
|
|
|
@ -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});
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue