Merge pull request #63 from jasonhenriquez/feat/change-tooltip-styling

Feat/change tooltip styling

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 {

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)
-      }
-    },
-  },
+  }
 })

src/renderer/components/ft-tooltip/ft-tooltip.vue

@@ -9,12 +9,10 @@
     </button>
     <p
       :id="id"
-      ref="tooltip"
       class="text"
       :class="{
         [position]: true,
         allowNewlines,
-        wrap: tooltipOutsideViewPort,
       }"
       role="tooltip"
       v-text="tooltip"