Erstellen von anpassbaren React-Tooltips

Einführung

In diesem Lab werden wir lernen, wie man in React mithilfe von Zustand und Ereignishandlern eine Tooltip-Komponente erstellt. Tooltips sind kleine Pop-up-Fenster, die beim Hovern des Benutzers über ein Element erscheinen und zusätzliche Informationen liefern. Am Ende des Labs werden Sie in der Lage sein, anpassbare Tooltips zu erstellen, die einfach in Ihre React-Anwendungen integriert werden können.

Skills Graph

Tooltip

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Hier ist eine klarere, präzisere und kohärentere Version des Inhalts:

Dieser Code erstellt eine Tooltip-Komponente. Um sie zu verwenden, tun Sie Folgendes:

1. Verwenden Sie den useState()-Hook, um die Variable show zu erstellen und auf false zu setzen.
2. Rendern Sie ein Container-Element, das das Tooltip-Element und die an die Komponente übergebenen children enthält.
3. Behandeln Sie die onMouseEnter- und onMouseLeave-Ereignisse, indem Sie die className des Tooltips umschalten, die von der show-Variable gesteuert wird.

Hier ist der Code für die Tooltip-Komponente:

.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>
  );
};

Um die Tooltip-Komponente zu verwenden, rufen Sie ReactDOM.createRoot() mit dem folgenden Code auf:

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

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Tooltip-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.