CSS 提示 UI

CSS 提示 UI 是為了讓用戶更好的使用網站而設計的。它可以在用戶鼠標移動到某個元素上時，顯示一個提示窗口，告訴用戶該元素的作用。下面是實現這個效果的 CSS 代碼：

.tip {
display: none; /* 初始時不顯示 */
position: absolute; /* 絕對定位 */
z-index: 9999; /* 高于其他元素 */
padding: 10px; /* 內邊距 */
background-color: #fff; /* 背景顏色 */
border-radius: 5px; /* 圓角 */
box-shadow: 0 0 5px rgba(0,0,0,.3); /* 陰影 */
}
.hover:hover .tip {
display: block; /* 鼠標懸停時顯示 */
top: 100%; /* 距離上方 100% */
left: 0; /* 距離左側 0 */
}
.hover:after {
content: ""; /* 內容為空 */
display: block;
width: 0;
height: 0;
border-top: 10px solid #fff; /* 與提示框背景色相同 */
border-left: 10px solid transparent; /* 左邊框透明 */
border-right: 10px solid transparent; /* 右邊框透明 */
position: absolute;
top: -10px; /* 距離上方 -10px */
left: 50%; /* 距離左側 50% */
margin-left: -10px; /* 邊距為 -10px */
}

上面的代碼中，.tip 是提示框的樣式，.hover 是需要添加提示框的元素的樣式。當鼠標懸停在 .hover 元素上時，就會顯示 .tip 提示框。其中，.hover:after 是一個三角形，用來指示該提示框與 .hover 元素的關系。

使用 CSS 提示 UI 可以讓用戶更好的理解網站的功能，提高用戶體驗。在實際開發中，需要根據具體的需求來設計提示框的樣式和內容。