🔰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 排版
Last updated