Wie kann ich per Mausklick aktivierte Tooltips für Div-Elemente mit Ein-/Ausblendeffekten erstellen?

Verbessern Sie die Div-Interaktivität mit per Hover aktivierten Tooltips

Die Anzeige relevanter Informationen oder Anleitungen auf einer Webseite kann die Benutzererfahrung verbessern. In diesem Fall möchten wir einem div-Element einen Tooltip hinzufügen, der angezeigt wird, wenn der Benutzer mit der Maus darüber fährt, mit einem sanften Ein-/Ausblendeffekt. So kann dies erreicht werden:

Die grundlegende Tooltip-Funktionalität kann durch Hinzufügen eines Titelattributs zum div-Element erreicht werden. Dadurch wird ein einfacher Tooltip angezeigt, wenn der Mauszeiger über dem Element steht. Zum Beispiel:

<div title="This is my tooltip">
<p>Zusätzlich zum grundlegenden Tooltip können CSS-Eigenschaften integriert werden, um einen dynamischeren Effekt zu erzeugen:</p>
<p><strong>CSS für Ein-/Ausblendanimation </strong></p>
<p>Um einen Ein-/Ausblendeffekt hinzuzufügen, kann CSS verwendet werden, um das Erscheinen und Verschwinden des zu animieren Tooltip:</p>
<pre class="brush:php;toolbar:false">.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

<div title="This is my tooltip" class="visible"></div>