🔰tooltip

dev ⟩ tools ⟩ tooltip

動態顯示元素的提示訊息，實現方式： 👉 參看下方「💾 程式」頁面

🗺️ 圖表

💾 程式

📁 html ( 👉 codepen ⟩ tooltip )

• 用 .tooltip-wrapper 包住子元素和 .tooltip。

• 每個子元素下方都有一個隱藏的.tooltip。

<!--------- 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)

/* ----------- 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;			 /* ⭐️ 完全不透明 */
}

👥 相關

• tooltip 的位置需要用 position 來設定。

📗 參考

• ChatGPT ⟩ 學習 CSS 排版