diff --git a/frontend/src/Activity/Queue/QueueStatusCell.js b/frontend/src/Activity/Queue/QueueStatusCell.js index f8cbc65ff..552fa1444 100644 --- a/frontend/src/Activity/Queue/QueueStatusCell.js +++ b/frontend/src/Activity/Queue/QueueStatusCell.js @@ -116,6 +116,7 @@ function QueueStatusCell(props) { title={title} body={hasWarning || hasError ? getDetailedPopoverBody(statusMessages) : sourceTitle} position={tooltipPositions.RIGHT} + canFlip={false} /> ); diff --git a/frontend/src/Components/Tooltip/Tooltip.js b/frontend/src/Components/Tooltip/Tooltip.js index ea940c9d7..ce9decc5a 100644 --- a/frontend/src/Components/Tooltip/Tooltip.js +++ b/frontend/src/Components/Tooltip/Tooltip.js @@ -35,6 +35,33 @@ class Tooltip extends Component { } } + // + // Control + + computeMaxSize = (data) => { + const { + top, + right, + bottom, + left + } = data.offsets.reference; + + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + + if ((/^top/).test(data.placement)) { + data.styles.maxHeight = top - 20; + } else if ((/^bottom/).test(data.placement)) { + data.styles.maxHeight = windowHeight - bottom - 20; + } else if ((/^right/).test(data.placement)) { + data.styles.maxWidth = windowWidth - right - 30; + } else { + data.styles.maxWidth = left - 30; + } + + return data; + } + // // Listeners @@ -72,7 +99,8 @@ class Tooltip extends Component { anchor, tooltip, kind, - position + position, + canFlip } = this.props; return ( @@ -98,10 +126,18 @@ class Tooltip extends Component { // are shown (Quality Definitions for example). eventsEnabled={false} modifiers={{ + computeMaxHeight: { + order: 851, + enabled: true, + fn: this.computeMaxSize + }, preventOverflow: { // Fixes positioning for tooltips in the queue // and likely others. escapeWithReference: true + }, + flip: { + enabled: canFlip } }} > @@ -132,7 +168,9 @@ class Tooltip extends Component { )} /> -