feat: ✨ composant fonctionnel sans js du dsfr

.vitepress/config.ts

@@ -106,8 +106,8 @@ export default defineConfig({
             link: '/composants/DsfrSegmented.md',
           },
           {
-            text: 'DsfrSegmentedSet',
-            link: '/composants/DsfrSegmentedSet.md',
+            text: 'DsfrTooltip',
+            link: '/composants/DsfrTooltip.md',
           },
         ]
       },

.vitepress/theme/style.css

@@ -7,7 +7,7 @@
  * Colors
  * -------------------------------------------------------------------------- */
 
-@font-face {
+ @font-face {
   font-family: Marianne;
   src: url("@gouvfr/dsfr/dist/fonts/Marianne-Light.woff2") format("woff2"), url("@gouvfr/dsfr/dist/fonts/Marianne-Light.woff") format("woff");
   font-weight: 300;
@@ -160,3 +160,29 @@
 .vp-doc summary {
   cursor: pointer;
 }
+
+.demo-container-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.w-full {
+  width: 100%;
+}

src/components/DsfrTooltip/DsfrTooltip.md

@@ -0,0 +1,20 @@
+# Information contextuelle et Infobulle - DsfrTooltip
+
+
+## Un exemple
+
+
+::: code-group
+
+<Story data-title="Démo" min-h="300px">
+  <DsfrTooltipExample />
+</Story>
+
+<<< docs-demo/DsfrTooltipExample.vue [Code de la démo]
+
+<<< DsfrTooltip.vue
+:::
+
+<script setup lang="ts">
+import DsfrTooltipExample from './docs-demo/DsfrTooltipExample.vue'
+</script>

src/components/DsfrTooltip/DsfrTooltip.vue

@@ -1,58 +1,89 @@
 <script setup lang="ts">
+import { computed, defineProps, ref } from 'vue'
+
 import { getRandomId } from '../../utils/random-utils'
-import '@gouvfr/dsfr/dist/core/core.module.min.js'
-import '@gouvfr/dsfr/dist/component/tooltip/tooltip.module.min.js'
+// import '@gouvfr/dsfr/dist/core/core.module.min.js'
+// import '@gouvfr/dsfr/dist/component/tooltip/tooltip.module.min.js'
 
 withDefaults(defineProps<{
     content: string
     onHover?: boolean
-    onClick?: boolean
     id?: string,
   }>(), {
   content: '',
   id: () => getRandomId('tooltip'),
 })
+
+const show = ref(true)
+
+const source = ref<HTMLElement | null>(null)
+const tooltip = ref<HTMLElement | null>(null)
+
+const isSourceAtBottom = computed(() => (source.value?.offsetTop + source.value?.offsetHeight + tooltip.value?.offsetHeight) >= document.documentElement.offsetHeight)
+const isSourceOnRightSide = computed(() => (source.value?.offsetLeft + source.value?.offsetWidth) >= document.documentElement.offsetWidth)
+const isSourceOnLeftSide = computed(() => (source.value?.offsetLeft + (source.value?.offsetWidth / 2) - (tooltip.value?.offsetWidth / 2)) < 0)
+const top = computed(() => isSourceAtBottom.value)
+
+const translateY = computed(() => top.value
+  ? `${source.value?.offsetTop - tooltip.value?.offsetHeight + 8}px`
+  : `${source.value?.offsetTop + source.value?.offsetHeight - 8}px`,
+)
+const translateX = computed(() =>
+  isSourceOnRightSide.value
+    ? `${source.value?.offsetLeft + source.value?.offsetWidth - tooltip.value?.offsetWidth - 8}px`
+    : isSourceOnLeftSide.value
+      ? `${source.value?.offsetLeft}px`
+      : `${source.value?.offsetLeft + (source.value?.offsetWidth / 2) - (tooltip.value?.offsetWidth / 2)}px`,
+)
+
+const arrowX = computed(() => isSourceOnLeftSide.value
+  ? `${-(tooltip.value?.offsetWidth / 2) + (source.value?.offsetWidth / 2)}px`
+  : isSourceOnRightSide.value
+    ? `${(tooltip.value?.offsetWidth / 2) - (source.value?.offsetWidth / 2)}px`
+    : '0px',
+)
+
+const tooltipStyle = computed(() => (`transform: translate(${translateX.value}, ${translateY.value}); --arrow-x: ${arrowX.value};'`))
+const tooltipClass = computed(() => ({
+  'fr-tooltip--shown': show.value,
+  'fr-placement--top': top.value,
+  'fr-placement--bottom': !top.value,
+}))
+
+const onClick = () => {
+  // if (onHover) {
+  //   return
+  // }
+  show.value = !show.value
+}
+// TODO: onmouse*
 </script>
 
 <template>
-  <div
-    v-if="onHover"
+  <component
+    :is="onHover ? 'a' : 'button'"
+    :id="'link-' + id"
+    ref="source"
+    :class="onHover ? 'fr-link' : 'fr-btn  fr-btn--tooltip'"
+    :aria-describedby="id"
+    :href="onHover ? '#' : undefined"
+    @click="onClick()"
+    @mouseenter="onMouseEnter()"
+    @mouseleave="onMouseLeave()"
   >
-    <a
-      :id="'link-' + id"
-      class="fr-link"
-      :aria-describedby="id"
-      href="#"
-    >
-      <slot />
-    </a>
-    <span
-      :id="id"
-      class="fr-tooltip  fr-placement  fr-tooltype-style"
-      role="tooltip"
-      aria-hidden="true"
-    >
-      {{ content }}
-    </span>
-  </div>
-
-  <div
-    v-if="onClick"
+    <slot />
+  </component>
+  <span
+    :id="id"
+    ref="tooltip"
+    class="fr-tooltip  fr-placement"
+    :class="tooltipClass"
+    :style="tooltipStyle"
+    role="tooltip"
+    aria-hidden="true"
   >
-    <button
-      :id="'button-' + id"
-      class="fr-btn--tooltip fr-btn"
-      :aria-describedby="id"
-    />
-    <span
-      :id="id"
-      class="fr-tooltip  fr-placement  fr-tooltype-style"
-      role="tooltip"
-      aria-hidden="true"
-    >
-      {{ content }}
-    </span>
-  </div>
+    {{ content }}
+  </span>
 </template>
 <style>
 /*

src/components/DsfrTooltip/docs-demo/DsfrTooltipExample.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import DsfrTooltip from '../DsfrTooltip.vue'
+</script>
+
+<template>
+  <div class="flex flex-end w-full">
+    <DsfrTooltip
+      content="Texte de l’info-bulle qui peut être très très long"
+    />
+  </div>
+</template>
+
+<style scoped>
+.w-full {
+  width: 100%;
+}
+.flex {
+  display: flex;
+}
+.flex-end {
+  justify-content: flex-end;
+}
+</style>