Div 要素のフェードイン/フェードアウト効果を備えた動的ツールチップを作成するにはどうすればよいですか?

動的ツールチップを div 要素に追加します

質問:

ラベルと入力フィールドを持つ div 要素について考えてみましょう:

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

ユーザーが div 要素の上にマウスを移動したときに表示されるツールチップを作成するにはどうすればよいですか?微妙なフェードイン/フェードアウト効果はありますか?

答え:

静的メッセージを表示する基本的なツールチップの場合、タイトル属性を利用できます:

<div title="This is my tooltip">

ただし、ダイナミック テキストとアニメーション フェード効果を含むツールチップの場合は、より高度なアプローチが必要です:

1. 作成ツールチップの CSS アニメーション。
2. ホバー イベントを処理する JS イベント リスナーを追加します。
3. ツールチップ DOM 要素を作成し、div を基準にして配置します。
4. 追加/ホバー時/削除時に CSS アニメーションを適用してツールチップを削除しますhover.

JavaScript と 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);
});

以上がDiv 要素のフェードイン/フェードアウト効果を備えた動的ツールチップを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。