BjTooltip

Composant Vue pour l’infobulle DSBJ. Le contenu déclencheur passe dans le slot par défaut ; le texte d’aide est fourni par la prop text.

Utilisation

<script setup>
import { BjTooltip } from '@flrxnt/dsbj/vue'
</script>

<template>
  <BjTooltip text="Texte d’aide contextuelle" position="top">
    <button type="button" class="bj-btn">Survoler</button>
  </BjTooltip>
</template>

Aperçu (HTML)

Texte d’aide contextuelle

section-positions

positions-code-intro

<BjTooltip text="Au-dessus" position="top"><button type="button" class="bj-btn">Top</button></BjTooltip>
<BjTooltip text="En dessous" position="bottom"><button type="button" class="bj-btn">Bottom</button></BjTooltip>
<BjTooltip text="À gauche" position="left"><button type="button" class="bj-btn">Left</button></BjTooltip>
<BjTooltip text="À droite" position="right"><button type="button" class="bj-btn">Right</button></BjTooltip>

section-positions-preview

Infobulle basInfobulle gaucheInfobulle droite

section-combos

combos-intro

<!-- Lien + droite -->
<BjTooltip text="Ouvrir dans un nouvel onglet" position="right">
  <a href="/doc" class="bj-link">Documentation</a>
</BjTooltip>

<!-- Icône seule + bas -->
<BjTooltip text="Paramètres" position="bottom">
  <button type="button" class="bj-btn bj-btn--icon-only" aria-label="Paramètres">
    <i class="ri-settings-3-line" aria-hidden="true"></i>
  </button>
</BjTooltip>

section-slots

SlotDescription
defaultslot-default

section-no-emits

no-emits-desc

section-no-vmodel

no-vmodel-desc

Props

PropDescription
textTexte affiché dans l’infobulle (obligatoire).
positionPosition par rapport au déclencheur : top (défaut), bottom, left ou right.