diff --git a/frontend/src/Components/Tooltip/Tooltip.css b/frontend/src/Components/Tooltip/Tooltip.css index 1db58372b..4a16476b4 100644 --- a/frontend/src/Components/Tooltip/Tooltip.css +++ b/frontend/src/Components/Tooltip/Tooltip.css @@ -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; diff --git a/frontend/src/Components/Tooltip/Tooltip.js b/frontend/src/Components/Tooltip/Tooltip.js index 3f8b5ad06..8faf97414 100644 --- a/frontend/src/Components/Tooltip/Tooltip.js +++ b/frontend/src/Components/Tooltip/Tooltip.js @@ -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} > +
{ this.state.isOpen ?
-
-