Création de bulles d'aide personnalisables en React

Introduction

Dans ce laboratoire, nous allons apprendre à créer un composant de bulle d'aide (tooltip) en React en utilisant l'état et les gestionnaires d'événements. Les bulles d'aide sont de petites boîtes de pop-up qui apparaissent lorsque l'utilisateur survole un élément, fournissant des informations supplémentaires. À la fin du laboratoire, vous serez capable de créer des bulles d'aide personnalisables qui peuvent être facilement intégrées dans vos applications React.

Skills Graph

Tooltip

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Voici une version plus claire, concise et cohérente du contenu :

Ce code crée un composant de bulle d'aide (tooltip). Pour l'utiliser, procédez comme suit :

1. Utilisez le hook useState() pour créer la variable show et la définir sur false.
2. Rendez un élément de conteneur qui contient l'élément de bulle d'aide et les children passés au composant.
3. Gérez les événements onMouseEnter et onMouseLeave en basculant la className de la bulle d'aide, qui est contrôlée par la variable show.

Voici le code pour le composant de bulle d'aide :

.tooltip-container {
  position: relative;
}

.tooltip-box {
  position: absolute;
  top: calc(100% + 5px);
  display: none;
  padding: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

.tooltip-box.visible {
  display: block;
}

.tooltip-arrow {
  position: absolute;
  top: -10px;
  left: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
}

const Tooltip = ({ children, text, ...rest }) => {
  const [show, setShow] = React.useState(false);

  return (
    <div className="tooltip-container">
      <div className={show ? "tooltip-box visible" : "tooltip-box"}>
        {text}
        <span className="tooltip-arrow" />
      </div>
      <div
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
        {...rest}
      >
        {children}
      </div>
    </div>
  );
};

Pour utiliser le composant de bulle d'aide, appelez ReactDOM.createRoot() avec le code suivant :

ReactDOM.createRoot(document.getElementById("root")).render(
  <Tooltip text="Simple tooltip">
    <button>Hover me!</button>
  </Tooltip>
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations ! Vous avez terminé le laboratoire sur les bulles d'aide (tooltip). Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.