Wie erstelle ich einen dynamischen Tooltip mit Ein-/Ausblendeffekten für ein Div-Element?

Fügen Sie einen dynamischen Tooltip zu einem div-Element hinzu

Frage:

Betrachten Sie ein div-Element mit einer Beschriftung und einem Eingabefeld:

<div>
  <label>Name</label>
  <input type="text">
</div>

Wie erstellen Sie einen Tooltip, der angezeigt wird, wenn Benutzer mit der Maus über das div-Element fahren, mit einem subtilen Ein-/Ausblendeffekt?

Antwort:

Für einfache Tooltips, die eine statische Nachricht anzeigen, können Sie das Titelattribut verwenden:

<div title="This is my tooltip">
<p>Allerdings Für Tooltips mit dynamischem Text und animierten Fade-Effekten ist ein fortgeschrittenerer Ansatz erforderlich:</p>
<ol>
<li>Erstellen Sie eine CSS-Animation für Tooltip.</li>
<li>Fügen Sie einen JS-Ereignis-Listener hinzu, um die Hover-Ereignisse zu verarbeiten.</li>
<li>Erstellen Sie ein Tooltip-DOM-Element und positionieren Sie es relativ zum Div.</li>
<li>Fügen Sie den Tooltip hinzu bzw. entfernen Sie ihn Anwenden der CSS-Animation beim Hovern/Entfernen des Hovers.</li>
</ol>
<p>Hier ist ein Beispiel für die Verwendung von JavaScript und CSS:</p>
<pre class="brush:php;toolbar:false">.tooltip {
  display: none;
  position: absolute;
  padding: 10px;
  color: white;
  border: 1px solid black;
  opacity: 0;
  transition: all 0.2s;
}

.tooltip.show {
  display: block;
  opacity: 1;
}

// Create a tooltip element
const tooltip = document.createElement('span');
tooltip.classList.add('tooltip');

// Add the event listener to the div
const div = document.querySelector('div');
div.addEventListener('mouseover', (e) => {
  // Set the tooltip text
  tooltip.textContent = 'This is my tooltip';

  // Position the tooltip
  tooltip.style.left = e.x + 'px';
  tooltip.style.top = e.y + 'px';

  // Add the tooltip to the body
  document.body.appendChild(tooltip);

  // Add the show class to the tooltip
  tooltip.classList.add('show');
});

div.addEventListener('mouseout', () => {
  // Remove the tooltip from the body
  document.body.removeChild(tooltip);
});