Fixed: Tooltip goes off screen for Mobile

pull/4598/head
Qstick 4 years ago
parent 80ae55920b
commit c34a5c0c3d

@ -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;

@ -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 - 30;
data.styles.maxWidth = windowWidth - right - 50;
} else {
data.styles.maxWidth = left - 30;
}
@ -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}
>

Loading…
Cancel
Save