BjTooltip

import { BjButton, BjTooltip } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <BjTooltip text="Texte d’aide contextuelle" position="top">
      <BjButton type="button">Survoler</BjButton>
    </BjTooltip>
  )
}

import { BjTooltip } from '@flrxnt/dsbj/react'

export function AllPositions() {
  return (
    <>
      <BjTooltip text="Au-dessus" position="top">
        <button type="button" className="bj-btn">top</button>
      </BjTooltip>
      <BjTooltip text="En dessous" position="bottom">
        <button type="button" className="bj-btn">bottom</button>
      </BjTooltip>
      <BjTooltip text="À gauche" position="left">
        <button type="button" className="bj-btn">left</button>
      </BjTooltip>
      <BjTooltip text="À droite" position="right">
        <button type="button" className="bj-btn">right</button>
      </BjTooltip>
    </>
  )
}

import { BjTooltip } from '@flrxnt/dsbj/react'

export function StyledTooltip() {
  return (
    <BjTooltip text="Info" position="bottom" className="my-tooltip">
      <span className="bj-link" tabIndex={0} role="button">
        Lien factice
      </span>
    </BjTooltip>
  )
}

import { BjTooltip } from '@flrxnt/dsbj/react'

export function TriggerVariants() {
  return (
    <>
      <BjTooltip text="Bouton">
        <button type="button" className="bj-btn bj-btn--sm">Action</button>
      </BjTooltip>
      <BjTooltip text="Icône">
        <button type="button" className="bj-btn bj-btn--tertiary" aria-label="Aide">
          <i className="ri-question-line" aria-hidden="true" />
        </button>
      </BjTooltip>
    </>
  )
}