tooltips是一種在網頁中添加文字提示的途徑。CSS是實現tooltips的一種方式，通過CSS樣式制作tooltips可以使網頁更加美觀和易用。

CSS中，使用偽類選擇器::before和::after，在元素前或元素后添加偽元素。通過設置偽元素的content屬性和background-color等屬性，可以制作出tooltips。

.tooltip {
position: relative;
}
.tooltip:hover::before {
content: attr(data-tip);
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
padding: 6px 12px;
background-color: #333;
color: #fff;
font-size: 14px;
border-radius: 4px;
}

在上述代碼中，通過設置元素的position屬性為relative，使得其可以作為偽元素的定位參考點。當該元素被鼠標懸停時，通過hover偽類選擇器選中其before偽元素，并設置偽元素的content屬性為data-tip的屬性值，即為我們要展示的tooltips內容。同時，設置偽元素的位置和樣式屬性，使tooltips顯示在元素的上方。

CSS制作tooltips的優勢是，可以避免使用JavaScript和jQuery等腳本庫，使頁面加載速度更快。同時，通過優化CSS樣式，可以制作出各種不同樣式的tooltips，令網頁更加美觀。