在web開發中，有時候需要在某些元素的左上角添加提示信息，這樣可以讓用戶更加直觀地了解該元素的作用。下面我們來介紹如何使用CSS實現左上角提示。

.tooltip {
position: relative; /* 確保 .tooltip 的子元素能使用 absolute 定位 */ 
display: inline-block; /* 行內塊級元素，使 .tooltip 占據寬度的相應部分 */
}
.tooltip .tooltiptext {
visibility: hidden; /* 隱藏提示信息 */
background-color: #333; /* 設定提示框背景顏色 */
color: #fff; /* 設定提示框文字顏色 */
text-align: center; /* 文字居中 */
border-radius: 6px; /* 設定圓角 */
padding: 5px; /* 設定內邊距 */
position: absolute; /* 定位方式 */
z-index: 1; /* 使提示框在其他元素之上 */
top: -30px; /* 設定提示框離頂部的距離 */
left: 50%; /* 設定提示框離左側的距離 */
margin-left: -50px; /* 設定提示框寬度的一半，居中 */
}
.tooltip:hover .tooltiptext {
visibility: visible; /* 鼠標懸停時顯示提示框 */
}

以上代碼中，我們定義了一個類名為 .tooltip，并在其中包含了另外一個類名 .tooltiptext，后者代表提示信息。首先為 .tooltip 設置了相對定位，以便讓 .tooltip 的子元素能夠絕對定位。然后繼續為 .tooltiptext 設置樣式，設定了它的顏色、背景、內邊距等等。在 Position 屬性中不僅設定了它的定位方式為絕對定位，還設置了離頂部和左側的距離，使得它能夠在元素的左上角顯示。最后使用 :hover 偽類選擇器來實現鼠標懸停時顯示提示框的效果。