Fixed: Tooltips overflowing the screen width

Fixes #3924
This commit is contained in:
Qstick 2020-07-26 23:02:25 -04:00 committed by Mark McDowall
parent 4cadf1d43b
commit 0a66e86ccc
2 changed files with 19 additions and 18 deletions

View File

@ -1,6 +1,6 @@
.tooltipContainer {
z-index: $popperZIndex;
margin: 10px 15px;
margin: 10px 10px;
}
.tooltip {
@ -28,6 +28,10 @@
border-color: transparent;
}
.arrowDisabled {
display: none;
}
.arrow::after {
border-width: 10px;
content: '';
@ -35,7 +39,6 @@
.top {
bottom: -11px;
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
@ -64,7 +67,6 @@
}
.right {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
@ -95,7 +97,6 @@
.bottom {
top: -11px;
left: 50%;
margin-left: -11px;
border-top-width: 0;
@ -124,7 +125,6 @@
}
.left {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;

View File

@ -54,7 +54,7 @@ class Tooltip extends Component {
} else if ((/^bottom/).test(data.placement)) {
data.styles.maxHeight = windowHeight - bottom - 20;
} else if ((/^right/).test(data.placement)) {
data.styles.maxWidth = windowWidth - right - 35;
data.styles.maxWidth = windowWidth - right - 50;
} else {
data.styles.maxWidth = left - 35;
}
@ -132,16 +132,16 @@ class Tooltip extends Component {
fn: this.computeMaxSize
},
preventOverflow: {
// Fixes positioning for tooltips in the queue
// and likely others.
escapeWithReference: true
// Fixes positioning for tooltips in the queue
// and likely others.
escapeWithReference: false
},
flip: {
enabled: canFlip
}
}}
>
{({ ref, style, placement, scheduleUpdate }) => {
{({ ref, style, placement, arrowProps, scheduleUpdate }) => {
this._scheduleUpdate = scheduleUpdate;
return (
@ -152,6 +152,15 @@ class Tooltip extends Component {
onMouseEnter={this.onMouseEnter}
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 ?
<div
@ -160,14 +169,6 @@ class Tooltip extends Component {
styles[kind]
)}
>
<div
className={classNames(
styles.arrow,
styles[kind],
styles[placement.split('-')[0]]
)}
/>
<div
className={bodyClassName}
>