VEZ-1 tooltip center fix

DanielTerletzkiy · Aug 14, 2022 · 87502cc · 87502cc
1 parent 246700e
commit 87502cc
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 15 deletions.
diff --git a/src/components/tooltip/DTooltip.vue b/src/components/tooltip/DTooltip.vue
@@ -7,15 +7,18 @@
     <component :is="transitionComponent" :duration="100">
       <suspense>
         <div class="d-tooltip__wrapper" :style="stylesObject" v-show="hoverState" ref="tooltip">
-          <slot name="tooltip-wrapper">
-            <DLabel class="d-tooltip__wrapper__content" v-bind="{...$props, ...$attrs}" :filled="filled" :glow="!filled"
-                    glowing>
-              <DCardSubtitle :style="{color: useFontColor + '!important'}" class="pa-0">
-                <slot name="tooltip">
-                </slot>
-              </DCardSubtitle>
-            </DLabel>
-          </slot>
+          <div id="helper">
+            <slot name="tooltip-wrapper">
+              <DLabel class="d-tooltip__wrapper__content" v-bind="{...$props, ...$attrs}" :filled="filled"
+                      :glow="!filled"
+                      glowing>
+                <DCardSubtitle :style="{color: useFontColor + '!important'}" class="pa-0">
+                  <slot name="tooltip">
+                  </slot>
+                </DCardSubtitle>
+              </DLabel>
+            </slot>
+          </div>
         </div>
       </suspense>
     </component>
@@ -29,7 +32,18 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {computed, getCurrentInstance, inject, nextTick, PropType, reactive, ref, watch} from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  nextTick, onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  PropType,
+  reactive,
+  ref,
+  watch
+} from "vue";
 import defaultProps from "../../mixins/DefaultProps";
 import DWrapper from "../DWrapper.vue";
 import DLabel from "../label/DLabel.vue";
@@ -86,11 +100,9 @@ function onHoverLeave() {
 }
 
 async function onHover() {
-  //console.log(tooltip)
   if (hoverState.value && tooltip.value) {
     const triggerRect = trigger.value.getBoundingClientRect();
     const tooltipRect = tooltip.value.getBoundingClientRect();
-    //console.log('triggerRect: ', triggerRect, 'tooltipRect:', tooltipRect)
 
     switch (props.position) {
       case Position.Top: {
@@ -148,6 +160,26 @@ const useFontColor = computed(() => {
           props.fontColor : 'inherit';
 });
 
+const observer = ref<any>(null);
+
+onMounted(() => {
+  try {
+    observer.value = new MutationObserver(function () {
+      onHover();
+    }.bind(this));
+
+    observer.value.observe(
+        document.getElementById('helper'),
+        {attributes: true, childList: true, characterData: true, subtree: true}
+    );
+  } catch (e) {
+  }
+})
+
+onBeforeUnmount(() => {
+  observer.value.disconnect();
+})
+
 </script>
 
 <style lang="scss">

diff --git a/src/stories/DTooltip.stories.js b/src/stories/DTooltip.stories.js
@@ -1,6 +1,7 @@
 import DTooltip from "../components/tooltip/DTooltip.vue";
 import DCard from "../components/card/DCard.vue";
 import DButton from "../components/button/DButton.vue";
+import {ref} from "vue";
 
 export default {
     title: 'DTooltip',
@@ -17,19 +18,25 @@ const Template = (args) => ({
             'left',
             'right'
         ]
-        return {args, positions};
+        const content = ref(10)
+
+        function changeContent() {
+            content.value = Math.random() * 50000
+        }
+
+        return {args, positions, content, changeContent};
     },
     template: `
       <d-card class="ma-20 pa-10" elevation>
       <d-column gap>
         <d-tooltip v-bind="args" v-for="position in positions" :position="position">
-          <d-button filled color="primary">
+          <d-button filled color="primary" @click="changeContent">
             hello i is btn {{ position }}
           </d-button>
           <template v-slot:tooltip-wrapper>
             <d-card elevation="6">
               <d-card-title>
-                This is a tooltip
+                {{ content }}
               </d-card-title>
               <d-button>
                 hiii :)