diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css index e0f5ba3b5..40c5a9199 100644 --- a/src/renderer/components/ft-tooltip/ft-tooltip.css +++ b/src/renderer/components/ft-tooltip/ft-tooltip.css @@ -93,11 +93,13 @@ } .text.allowNewlines { - white-space: pre; - text-align: start; -} -.text.allowNewlines.wrap { white-space: pre-wrap; + text-align: start; + inline-size: 55vw; +} + +@media only screen and (max-width: 1100px) { + inline-size: 40vw; } .tooltip { diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.js b/src/renderer/components/ft-tooltip/ft-tooltip.js index bf2c5334a..66ba1d1dd 100644 --- a/src/renderer/components/ft-tooltip/ft-tooltip.js +++ b/src/renderer/components/ft-tooltip/ft-tooltip.js @@ -2,26 +2,6 @@ import { defineComponent } from 'vue' let idCounter = 0 -function isOutOfViewport(el) { - if (el == null) { return {} } - - const bounding = el.getBoundingClientRect() - const out = {} - - out.top = bounding.top < 0 - out.left = bounding.left < 0 - out.bottom = bounding.bottom > (window.innerHeight || document.documentElement.clientHeight) - out.right = bounding.right > (window.innerWidth || document.documentElement.clientWidth) - out.horizontal = out.left || out.right - out.veritical = out.top || out.bottom - out.any = out.top || out.left || out.bottom || out.right - out.all = out.top && out.left && out.bottom && out.right - - out.bounding = bounding - - return out -} - export default defineComponent({ name: 'FtTooltip', props: { @@ -43,28 +23,7 @@ export default defineComponent({ const id = `ft-tooltip-${++idCounter}` return { - id, - isTooltipOutOfViewportResult: {} + id } - }, - computed: { - tooltipOutsideViewPort() { - return this.isTooltipOutOfViewportResult.horizontal - }, - }, - mounted() { - this.updateSizeRelatedStates() - window.addEventListener('resize', this.updateSizeRelatedStates) - }, - destroyed() { - window.removeEventListener('resize', this.updateSizeRelatedStates) - }, - methods: { - updateSizeRelatedStates() { - if (this.allowNewlines) { - // Only when newlines allowed have issue with wrapping - this.isTooltipOutOfViewportResult = isOutOfViewport(this.$refs.tooltip) - } - }, - }, + } }) diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.vue b/src/renderer/components/ft-tooltip/ft-tooltip.vue index 6996d2836..494ee5af1 100644 --- a/src/renderer/components/ft-tooltip/ft-tooltip.vue +++ b/src/renderer/components/ft-tooltip/ft-tooltip.vue @@ -9,12 +9,10 @@