feat: ✨ composant tooltip fonctionnel avec js du dsfr

src/components/DsfrTooltip/DsfrTooltip.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { getRandomId } from '../../utils/random-utils'
-import { ref } from 'vue'
+import '@gouvfr/dsfr/dist/core/core.module.min.js'
+import '@gouvfr/dsfr/dist/component/tooltip/tooltip.module.min.js'
 
 withDefaults(defineProps<{
     content: string
@@ -11,19 +12,11 @@ withDefaults(defineProps<{
   content: '',
   id: () => getRandomId('tooltip'),
 })
-
-const showToolTip = ref(false)
-
-function toggleToolTip () {
-  showToolTip.value = !showToolTip.value
-}
 </script>
 
 <template>
   <div
     v-if="onHover"
-    @mouseover="toggleToolTip()"
-    @mouseout="toggleToolTip()"
   >
     <a
       :id="'link-' + id"
@@ -35,10 +28,7 @@ function toggleToolTip () {
     </a>
     <span
       :id="id"
-      class="fr-tooltip  fr-placement  fr-placement--top  fr-placement--center  fr-tooltype-style"
-      :class="{
-        'fr-tooltip--shown': showToolTip
-      }"
+      class="fr-tooltip  fr-placement  fr-tooltype-style"
       role="tooltip"
       aria-hidden="true"
     >
@@ -48,7 +38,6 @@ function toggleToolTip () {
 
   <div
     v-if="onClick"
-    @click="toggleToolTip()"
   >
     <button
       :id="'button-' + id"
@@ -57,10 +46,7 @@ function toggleToolTip () {
     />
     <span
       :id="id"
-      class="fr-tooltip  fr-placement  fr-placement--top  fr-placement--center  fr-tooltype-style"
-      :class="{
-        'fr-tooltip--shown': showToolTip
-      }"
+      class="fr-tooltip  fr-placement  fr-tooltype-style"
       role="tooltip"
       aria-hidden="true"
     >