feat: ✨ Nouveau composant Bulle d'aide

src/components/DsfrTooltip/DsfrTooltip.stories.ts

@@ -0,0 +1,81 @@
+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: {
+    id: {
+      control: 'text',
+      description: '(optionnel) Valeur de l’attribut `id` du tooltip. Par défaut, un id pseudo-aléatoire sera donné.',
+    },
+    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,49 @@
+<script setup lang="ts">
+  import '@gouvfr/dsfr/dist/component/tooltip/tooltip.module.js'
+  import { getRandomId } from '../../utils/random-utils'
+
+  withDefaults(defineProps<{
+    content: string
+    onHover?: boolean
+    onClick?: boolean
+    id?: string,
+  }>(), {
+    content: '',
+    id: () => getRandomId('tooltip'),
+  })
+</script>
+
+<template>
+  <div v-if="onHover">
+    <a
+      class="fr-link"
+      :aria-describedby="id"
+      href="#"
+    >
+      <slot />
+    </a>
+    <span
+      class="fr-tooltip fr-placement"
+      :id="id"
+      role="tooltip"
+      aria-hidden="true"
+    >
+    {{ content }}
+    </span>
+  </div>
+
+  <div v-if="onClick">
+    <button
+      class="fr-btn--tooltip fr-btn"
+      :aria-describedby="id"
+    />
+    <span
+      class="fr-tooltip fr-placement"
+      :id="id"
+      role="tooltip"
+      aria-hidden="true"
+    >
+    {{ content }}
+    </span>
+  </div>
+</template>