parent
4cadf1d43b
commit
0a66e86ccc
|
@ -1,6 +1,6 @@
|
||||||
.tooltipContainer {
|
.tooltipContainer {
|
||||||
z-index: $popperZIndex;
|
z-index: $popperZIndex;
|
||||||
margin: 10px 15px;
|
margin: 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
|
@ -28,6 +28,10 @@
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.arrowDisabled {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.arrow::after {
|
.arrow::after {
|
||||||
border-width: 10px;
|
border-width: 10px;
|
||||||
content: '';
|
content: '';
|
||||||
|
@ -35,7 +39,6 @@
|
||||||
|
|
||||||
.top {
|
.top {
|
||||||
bottom: -11px;
|
bottom: -11px;
|
||||||
left: 50%;
|
|
||||||
margin-left: -11px;
|
margin-left: -11px;
|
||||||
border-bottom-width: 0;
|
border-bottom-width: 0;
|
||||||
|
|
||||||
|
@ -64,7 +67,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
top: 50%;
|
|
||||||
left: -11px;
|
left: -11px;
|
||||||
margin-top: -11px;
|
margin-top: -11px;
|
||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
|
@ -95,7 +97,6 @@
|
||||||
|
|
||||||
.bottom {
|
.bottom {
|
||||||
top: -11px;
|
top: -11px;
|
||||||
left: 50%;
|
|
||||||
margin-left: -11px;
|
margin-left: -11px;
|
||||||
border-top-width: 0;
|
border-top-width: 0;
|
||||||
|
|
||||||
|
@ -124,7 +125,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
top: 50%;
|
|
||||||
right: -11px;
|
right: -11px;
|
||||||
margin-top: -11px;
|
margin-top: -11px;
|
||||||
border-right-width: 0;
|
border-right-width: 0;
|
||||||
|
|
|
@ -54,7 +54,7 @@ class Tooltip extends Component {
|
||||||
} else if ((/^bottom/).test(data.placement)) {
|
} else if ((/^bottom/).test(data.placement)) {
|
||||||
data.styles.maxHeight = windowHeight - bottom - 20;
|
data.styles.maxHeight = windowHeight - bottom - 20;
|
||||||
} else if ((/^right/).test(data.placement)) {
|
} else if ((/^right/).test(data.placement)) {
|
||||||
data.styles.maxWidth = windowWidth - right - 35;
|
data.styles.maxWidth = windowWidth - right - 50;
|
||||||
} else {
|
} else {
|
||||||
data.styles.maxWidth = left - 35;
|
data.styles.maxWidth = left - 35;
|
||||||
}
|
}
|
||||||
|
@ -132,16 +132,16 @@ class Tooltip extends Component {
|
||||||
fn: this.computeMaxSize
|
fn: this.computeMaxSize
|
||||||
},
|
},
|
||||||
preventOverflow: {
|
preventOverflow: {
|
||||||
// Fixes positioning for tooltips in the queue
|
// Fixes positioning for tooltips in the queue
|
||||||
// and likely others.
|
// and likely others.
|
||||||
escapeWithReference: true
|
escapeWithReference: false
|
||||||
},
|
},
|
||||||
flip: {
|
flip: {
|
||||||
enabled: canFlip
|
enabled: canFlip
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{({ ref, style, placement, scheduleUpdate }) => {
|
{({ ref, style, placement, arrowProps, scheduleUpdate }) => {
|
||||||
this._scheduleUpdate = scheduleUpdate;
|
this._scheduleUpdate = scheduleUpdate;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -152,6 +152,15 @@ class Tooltip extends Component {
|
||||||
onMouseEnter={this.onMouseEnter}
|
onMouseEnter={this.onMouseEnter}
|
||||||
onMouseLeave={this.onMouseLeave}
|
onMouseLeave={this.onMouseLeave}
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
|
className={this.state.isOpen ? classNames(
|
||||||
|
styles.arrow,
|
||||||
|
styles[kind],
|
||||||
|
styles[placement.split('-')[0]]
|
||||||
|
) : styles.arrowDisabled}
|
||||||
|
ref={arrowProps.ref}
|
||||||
|
style={arrowProps.style}
|
||||||
|
/>
|
||||||
{
|
{
|
||||||
this.state.isOpen ?
|
this.state.isOpen ?
|
||||||
<div
|
<div
|
||||||
|
@ -160,14 +169,6 @@ class Tooltip extends Component {
|
||||||
styles[kind]
|
styles[kind]
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div
|
|
||||||
className={classNames(
|
|
||||||
styles.arrow,
|
|
||||||
styles[kind],
|
|
||||||
styles[placement.split('-')[0]]
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={bodyClassName}
|
className={bodyClassName}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in New Issue