> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/tools/tooltip.md).

# tooltip

[dev](/web/master.md) ⟩ [tools](/web/tools.md) ⟩ tooltip

{% hint style="info" %}
動態顯示元素的<mark style="color:yellow;">提示訊息</mark>，實現方式：  :point\_right: 參看下方「💾 程式」頁面
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖表" %}
{% embed url="<https://codepen.io/pegasusroe/pen/dPbvNNb>" %}
{% endtab %}

{% tab title="💾 程式" %}
📁 html  ( :point\_right: codepen ⟩ [tooltip](https://codepen.io/pegasusroe/pen/dPbvNNb) )&#x20;

* 用 <mark style="color:blue;">`.tooltip-wrapper`</mark> 包住子元素和 <mark style="color:blue;">`.tooltip`</mark>。&#x20;
* 每個子元素下方都有一個隱藏的<mark style="color:blue;">`.tooltip`</mark>。

```markup
<!--------- tooltip wrapper --------->
<div class="tooltip-wrapper">
    <!-- element with the tooltip -->
    <div class="item red">A</div>
    <!-- tooltip -->
    <span class="tooltip">我是 A 物件</span>
</div>
```

📁 css

* 將 .tooltip-wrapper 設為定位父元素。\
  (position: relative)
* 讓 .tooltip 參考定位父元素，定位在父元素的下方。 \
  (position: absolute, top: 125%)
* 設定  .tooltip-wrapper 的滑鼠懸停效果，顯示 tooltip。\
  (visibility: visible, opacity: 1)
* 設定 tooltip 的平滑顯示效果\
  (transition: opacity 0.3s ease-in-out)

```css
/* ----------- Tooltip 樣式 ----------- */

/* 包裝訊息容器 */
.tooltip-wrapper {
    position: relative;		/* ⭐️ 作為相對定位容器讓子元素參考，本身位置不變 */
}

/* 提示訊息 */
.tooltip {
    
    visibility: hidden;		/* ⭐️ 剛開始保持隱藏 */
    opacity: 0;			/* ⭐️ 剛開始完全透明 */
        
    /* ⭐️ 使用平滑的 transition 效果讓 tooltip 更美觀 */
    transition: opacity 0.3s ease-in-out;
	
    position: absolute;		/* ⭐️ 參考最近定位父元素，將自己定位在絕對位置上 */
    
    /* 放在定位父元素下方 */
    top: 125%; 			/* ⭐️ 父元素的 "top" 到自己的 "top" = 125% * 父元素高度❗ */

    /* 對齊父元素中央 */
    left: 50%;			 /* ⭐️ 父元素的 "left" 到自己的 "left" = 50% * 父元素寬度❗  */
    transform: translateX(-50%); /* ⭐️ 自己向左平移量 = 50% * 自己的寬度❗ */
}

/* ⭐️ 當滑鼠懸停在 tooltip-wrapper 時，顯示 tooltip */
.tooltip-wrapper:hover .tooltip {
    visibility: visible;	 /* ⭐️ 開啟可見度 */
    opacity: 1;			 /* ⭐️ 完全不透明 */
}
```

{% endtab %}

{% tab title="👥 相關" %}

* *<mark style="color:purple;">tooltip</mark>* 的位置需要用 [position](/web/css/layout/position.md) 來設定。
  {% endtab %}

{% tab title="📗 參考" %}

* ChatGPT ⟩ 學習 CSS 排版&#x20;
  {% endtab %}
  {% endtabs %}