CSS提示框是Web開發(fā)中常見的交互元素，可以用于顯示錯誤提示、成功信息等。而其中的頂部箭頭，則可以將提示框與相關(guān)元素進行連結(jié)。

要使用頂部箭頭，我們可以在CSS樣式中添加::before和::after偽元素，并設(shè)置其樣式和位置。

.tooltip {
position: relative;
}
.tooltip::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
border-width: 10px;
border-style: solid;
border-color: transparent transparent #ccc transparent;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background-color: #ccc;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
white-space: nowrap;
z-index: 999;
}

其中，::before偽元素用于創(chuàng)建箭頭，通過設(shè)置border-width、border-style和border-color，可以將箭頭呈現(xiàn)為一個等腰三角形。而::after偽元素則用于創(chuàng)建提示框本身，并通過attr(data-tooltip)將data-tooltip屬性的值作為提示框的內(nèi)容。

以上代碼只是一個簡單的示例，你可以根據(jù)自己的需求和設(shè)計風(fēng)格來調(diào)整箭頭和提示框的樣式和位置。而對于兼容性的問題，如果需要支持到IE9及以下版本，可以考慮使用JavaScript實現(xiàn)。