feat: ✨ Nouveau composant Bulle d'aide

src/components/DsfrTooltip/DsfrTooltip.stories.ts

@@ -0,0 +1,77 @@
+import DsfrTooltip from './DsfrTooltip.vue'
+
+/**
+ * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile)
+ */
+export default {
+  component: DsfrTooltip,
+  title: 'Composants/DsfrTooltip',
+  argTypes: {
+    content: {
+      control: 'text',
+      description: 'Contenu de votre bulle d’aide',
+    },
+    onHover: {
+      control: 'boolean',
+      description: 'Permet le basculement de la tuile en mode horizontal',
+    },
+    onClick: {
+        control: 'boolean',
+        description: 'Permet le basculement de la tuile en mode horizontal',
+      },
+  },
+}
+
+export const TooltipOnHover = (args) => ({
+  components: {
+    DsfrTooltip,
+  },
+
+  data () {
+    return {
+      ...args,
+    }
+  },
+
+  template: `
+    <DsfrTooltip
+      :content="content"
+      :onHover="onHover"
+      :onClick="onClick"
+    >
+      Un élément intriguant
+    </DsfrTooltip>
+  `,
+
+})
+TooltipOnHover.args = {
+  content: 'Un élément assez intriguant',
+  onHover: true,
+  onClick: false,
+}
+
+export const TooltipOnClick = (args) => ({
+  components: {
+    DsfrTooltip,
+  },
+
+  data () {
+    return {
+      ...args,
+    }
+  },
+
+  template: `
+    <DsfrTooltip
+      :content="content"
+      :onHover="onHover"
+      :onClick="onClick"
+    />
+  `,
+
+})
+TooltipOnClick.args = {
+  content: 'Une icône assez mystérieuse',
+  onHover: false,
+  onClick: true,
+}

src/components/DsfrTooltip/DsfrTooltip.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import '@gouvfr/dsfr/dist/component/tooltip/tooltip.module.js'
+
+  withDefaults(defineProps<{
+    content: string
+    onHover?: boolean
+    onClick?: boolean
+  }>(), {
+    content: '',
+  })
+</script>
+
+<template>
+  <div v-if="onHover">
+    <a class="fr-link" aria-describedby="tooltip-2989" id="link-2990" href="#">
+      <slot />
+    </a>
+    <span class="fr-tooltip fr-placement" id="tooltip-2989" role="tooltip" aria-hidden="true">{{ content }}</span>
+  </div>
+
+  <div v-if="onClick">
+    <button class="fr-btn--tooltip fr-btn" id="button-2995" aria-describedby="tooltip-2994" />
+    <span class="fr-tooltip fr-placement" id="tooltip-2994" role="tooltip" aria-hidden="true">{{ content }}</span>
+  </div>
+</template>