Une façon piratée de personnaliser les flèches d'info-bulle de Shadcn

Introduction

Shadcn est une bibliothèque incontournable pour copier-coller les composants de l'interface utilisateur dans les projets React. Un composant couramment utilisé est l'info-bulle, qui est construit sur @radix-ui/react-tooltip .

L'info-bulle par défaut ressemble à ceci :

Ajout de flèches d'info-bulle

Bien que le composant fourni fonctionne bien dès le départ, je me suis retrouvé à vouloir ajouter plus de personnalisation, comme l'ajout d'une flèche à l'info-bulle. Pour m'inspirer, je me suis tourné vers le composant Tooltip de tremor.so, qui est également basé sur @radix-ui/react-tooltip.

Heureusement, l'ajout d'une flèche est simple puisque @radix-ui/react-tooltip inclut un composant Arrow. Il vous suffit de l'inclure dans le composant Contenu.

import * as TooltipPrimitives from '@radix-ui/react-tooltip'

export default () => (
  <TooltipPrimitives.Provider>
    <TooltipPrimitives.Root>
      <TooltipPrimitives.Trigger />
      <TooltipPrimitives.Portal>
        <TooltipPrimitives.Content>
          <TooltipPrimitives.Arrow /> // Add the Arrow component here
        </TooltipPrimitives.Content>
      </TooltipPrimitives.Portal>
    </TooltipPrimitives.Root>
  </TooltipPrimitives.Provider>
)

Cependant, que se passe-t-il si vous souhaitez ajouter une bordure autour de l'intégralité de l'info-bulle, y compris la flèche ?

Ajout d'une bordure d'info-bulle

Pour y parvenir, vous devrez styliser le composant Arrow. Explorons quelques approches :

Approche naïve

Ajouter une bordure directement à l'Arrow à l'aide des classes Tailwind semble être un bon point de départ :

<TooltipPrimitives.Arrow
  className='border border-[var(--tooltip-border-color)] fill-[var(--tooltip-color)]'
  width={12}
  height={7}
  aria-hidden='true'
/>

Cependant, cette approche ne fonctionne pas comme prévu. La propriété border s'applique à la limite rectangulaire de l'élément, pas à la forme de la flèche elle-même.

Utilisation de la propriété Stroke

Puisque la Flèche est un élément SVG, vous pouvez utiliser la propriété Stroke pour définir une bordure :

<TooltipPrimitives.Arrow
  className='border-none fill-[var(--tooltip-color)]'
  stroke='var(--tooltip-border-color)'
  stroke-width='2'
  width={12}
  height={7}
  aria-hidden='true'
/>

Cela fonctionne mieux, mais la bordure supérieure de la flèche est toujours visible. Pour résoudre ce problème, explorons une autre méthode.

Explorer l'option Ombre portée

Une autre méthode consiste à utiliser une ombre portée pour simuler la bordure :

<TooltipPrimitives.Arrow
  className='-my-px border-none fill-[var(--tooltip-color)] drop-shadow-[0_1px_0_red]'
  width={12}
  height={7}
  aria-hidden='true'
/>

Cela crée une info-bulle visuellement transparente avec une flèche et une bordure, mais ce n'est peut-être pas toujours la solution la plus précise en fonction de votre cas d'utilisation.

Il convient de mentionner que cette solution s'inspire du composant Tooltip d'Origin UI, qui fournit diverses variantes d'info-bulles personnalisables qui peuvent gagner du temps de développement.

Que diriez-vous de le styliser encore plus, comme en utilisant mon propre SVG personnalisé ?

Flèche SVG personnalisée

Je visite souvent le site Web de Vercel et leur barre de navigation déroulante a attiré mon attention, en particulier la flèche.

Curieux de savoir comment il a été conçu, j'ai ouvert les outils de développement, inspecté les éléments et trouvé la flèche SVG. Je l'ai ensuite copié et collé dans Figma pour un examen plus approfondi.

J'ai pensé que cela pourrait être un choix de conception intéressant pour une flèche d'info-bulle.

Positionnement

Le positionnement de la flèche SVG dépend de l'emplacement de l'info-bulle : haut, bas, gauche ou droite. Le composant Contenu expose un attribut côté données, que vous pouvez utiliser pour ajuster le positionnement de manière dynamique :

import * as TooltipPrimitives from '@radix-ui/react-tooltip'

export default () => (
  <TooltipPrimitives.Provider>
    <TooltipPrimitives.Root>
      <TooltipPrimitives.Trigger />
      <TooltipPrimitives.Portal>
        <TooltipPrimitives.Content>
          <TooltipPrimitives.Arrow /> // Add the Arrow component here
        </TooltipPrimitives.Content>
      </TooltipPrimitives.Portal>
    </TooltipPrimitives.Root>
  </TooltipPrimitives.Provider>
)

Ensuite, nous pourrions remplacer le composant Arrow d'info-bulle intégré par notre conception personnalisée. Cela devrait fonctionner parfaitement, non ?

Eh bien, pas encore. Jetez un œil à ceci : la flèche est coincée au centre de l'info-bulle au lieu d'être positionnée près du déclencheur.

Ce comportement indésirable se produit parce que nous avons uniquement défini une position statique pour chaque côté. Au lieu de cela, nous devons utiliser une position dynamique pour résoudre ce problème.

Position dynamique

Commençons par utiliser à nouveau le composant Arrow intégré. Si vous inspectez le composant Arrow dans les outils de développement tout en simulant le changement de position de l'info-bulle, vous remarquerez que l'élément SVG est enveloppé dans un span avec une propriété CSS gauche.

Cette valeur change dynamiquement en fonction de la position de l'info-bulle. Nous pouvons capturer cette valeur CSS gauche et l'appliquer à notre composant de flèche personnalisé.

Pour suivre cette valeur gauche, nous devons l'observer à l'aide d'un MutationObserver.

<TooltipPrimitives.Arrow
  className='border border-[var(--tooltip-border-color)] fill-[var(--tooltip-color)]'
  width={12}
  height={7}
  aria-hidden='true'
/>

Résultat final

Ça fonctionne comme prévu maintenant ??

P.S. Vous souhaiterez peut-être ajuster la position supérieure si vous préférez afficher l'info-bulle sur le côté gauche ou droit.

Conclusion

Bien que cette approche fonctionne, je suis sûr qu'il existe des bibliothèques d'interface utilisateur qui permettent un style d'info-bulle plus simple et plus flexible. Cependant, il est gratifiant d’avoir trouvé une solution de contournement à ce problème. Si vous souhaitez explorer d'autres options, vous voudrez peut-être consulter cette discussion.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!