如何為具有淡入/淡出效果的 Div 元素建立懸停啟動的工具提示？

透過懸停啟動的工具提示增強 Div 互動性

在網頁上顯示相關資訊或指南可以增強使用者體驗。在本例中，我們尋求在 div 元素中新增一個工具提示，當使用者將滑鼠懸停在該元素上時，該元素會出現，並具有平滑的淡入/淡出效果。實作方式如下：

基本的工具提示功能可以透過在 div 元素中新增 title 屬性來實現。當遊標懸停在元素上時，這會顯示一個簡單的工具提示。例如：

<div title="This is my tooltip">
<p>除了基本的工具提示之外，還可以合併CSS 屬性來創建更動態的效果：</p>
<p><strong>用於淡入/淡出動畫的CSS </strong></p>
<p>要加入淡入/淡出效果，可以使用CSS來動畫顯示消失工具提示：</p>
<pre class="brush:php;toolbar:false">.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

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