Bagaimana untuk Mencipta Petua Alat Dinamik dengan Kesan Fade-in/Fade-out untuk Elemen Div?

Tambahkan Petua Alat Dinamik pada Elemen div

Soalan:

Pertimbangkan elemen div dengan label dan medan input:

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

Bagaimanakah anda membuat petua alat yang muncul apabila pengguna menuding di atas elemen div, dengan kesan fade-in/fade-out?

Jawapan:

Untuk petua alat asas yang memaparkan mesej statik, anda boleh menggunakan atribut tajuk:

<div title="This is my tooltip">

Walau bagaimanapun, untuk petua alat dengan teks dinamik dan kesan pudar animasi, pendekatan yang lebih maju ialah diperlukan:

1. Buat animasi CSS untuk petua alat.
2. Tambahkan pendengar acara JS untuk mengendalikan acara tuding.
3. Buat elemen DOM petua alat dan letakkannya relatif kepada div.
4. Tambah/buang petua alat dengan menggunakan animasi CSS apabila menuding/mengalih keluar tuding.

Berikut ialah contoh menggunakan JavaScript dan CSS:

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

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Petua Alat Dinamik dengan Kesan Fade-in/Fade-out untuk Elemen Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!