refactor(tooltip): move trigger as first child (#1045)

oruga-ui · Sep 17, 2024 · fc6584f · fc6584f
1 parent c6bd1bc
commit fc6584f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 33 deletions.
diff --git a/packages/oruga/src/components/slider/tests/__snapshots__/slider.test.ts.snap b/packages/oruga/src/components/slider/tests/__snapshots__/slider.test.ts.snap
@@ -10,15 +10,6 @@ exports[`OSlider tests > render correctly 1`] = `
              -->
     <div class="o-slide__thumb-wrapper" style="left: 0%;" data-oruga="slider-thumb">
       <div class="o-tip" data-oruga="tooltip">
-        <!--teleport start-->
-        <transition-stub name="fade" appear="false" persisted="true" css="true">
-          <div class="o-tip__content o-tip__content--auto" style="display: none;"><span class="o-tip__arrow o-tip__arrow--auto"></span>
-            <!--
-                        @slot Tooltip content, default is label prop
-                    -->0
-          </div>
-        </transition-stub>
-        <!--teleport end-->
         <div class="o-tip__trigger" aria-haspopup="true">
           <!--
                 @slot Tooltip trigger slot
@@ -28,6 +19,15 @@ exports[`OSlider tests > render correctly 1`] = `
             <!--v-if-->
           </div>
         </div>
+        <!--teleport start-->
+        <transition-stub name="fade" appear="false" persisted="true" css="true">
+          <div class="o-tip__content o-tip__content--auto" style="display: none;"><span class="o-tip__arrow o-tip__arrow--auto"></span>
+            <!--
+                        @slot Tooltip content, default is label prop
+                    -->0
+          </div>
+        </transition-stub>
+        <!--teleport end-->
       </div>
     </div>
     <!--v-if-->

diff --git a/packages/oruga/src/components/tooltip/Tooltip.vue b/packages/oruga/src/components/tooltip/Tooltip.vue
@@ -354,6 +354,24 @@ const contentClasses = defineClasses(
 
 <template>
     <div :class="rootClasses" data-oruga="tooltip">
+        <component
+            :is="triggerTag"
+            ref="triggerRef"
+            :class="triggerClasses"
+            aria-haspopup="true"
+            @click="onClick"
+            @contextmenu="onContextMenu"
+            @mouseenter="onHover"
+            @focus.capture="onFocus"
+            @blur.capture="onClose"
+            @mouseleave="onClose">
+            <!--
+                @slot Tooltip trigger slot
+                @binding {boolean} active - tooltip active state
+            -->
+            <slot :active="isActive" />
+        </component>
+
         <PositionWrapper
             v-slot="{ setContent }"
             v-model:position="autoPosition"
@@ -376,23 +394,5 @@ const contentClasses = defineClasses(
                 </div>
             </transition>
         </PositionWrapper>
-
-        <component
-            :is="triggerTag"
-            ref="triggerRef"
-            :class="triggerClasses"
-            aria-haspopup="true"
-            @click="onClick"
-            @contextmenu="onContextMenu"
-            @mouseenter="onHover"
-            @focus.capture="onFocus"
-            @blur.capture="onClose"
-            @mouseleave="onClose">
-            <!--
-                @slot Tooltip trigger slot
-                @binding {boolean} active - tooltip active state
-            -->
-            <slot :active="isActive" />
-        </component>
     </div>
 </template>
diff --git a/packages/oruga/src/components/tooltip/tests/__snapshots__/tooltip.test.ts.snap b/packages/oruga/src/components/tooltip/tests/__snapshots__/tooltip.test.ts.snap
@@ -2,6 +2,12 @@
 
 exports[`OTooltip tests > render correctly 1`] = `
 "<div class="o-tip" data-oruga="tooltip">
+  <div class="o-tip__trigger" aria-haspopup="true">
+    <!--
+                @slot Tooltip trigger slot
+                @binding {boolean} active - tooltip active state
+            -->
+  </div>
   <!--teleport start-->
   <transition-stub name="fade" appear="false" persisted="true" css="true">
     <div class="o-tip__content o-tip__content--auto" style="display: none;"><span class="o-tip__arrow o-tip__arrow--auto"></span>
@@ -11,11 +17,5 @@ exports[`OTooltip tests > render correctly 1`] = `
     </div>
   </transition-stub>
   <!--teleport end-->
-  <div class="o-tip__trigger" aria-haspopup="true">
-    <!--
-                @slot Tooltip trigger slot
-                @binding {boolean} active - tooltip active state
-            -->
-  </div>
 </div>"
 `;