CSS文字氣泡是一個很酷的設計元素，它可以讓你的網站在視覺上更加吸引人。接下來我將向你介紹如何設置CSS文字氣泡。

.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 100px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -50px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

首先，在CSS中，我們需要設置一個包裹文字的容器。這個容器可以是一個span元素，也可以是一個div元素，具體取決于你的設計需求。

<span class="tooltip">Hover over me
<span class="tooltiptext">Hello World</span>
</span>

接下來，我們需要在CSS中設置tooltip類和tooltiptext類。tooltip類用于設置包裹文字的容器，讓其具有相對定位。tooltiptext類用于設置氣泡，讓它具有絕對定位。

你可能已經注意到，我們在tooltiptext類中設置了固定的寬度和高度，以及邊框半徑、文本對齊和顏色。通過這些設置，我們可以創(chuàng)建一個漂亮的文字氣泡。

最后，我們使用:hover偽類來觸發(fā)氣泡的出現。當用戶將鼠標懸停在文字容器上時，tooltiptext類的可見性將設置為visible，氣泡將通過opacity屬性的過渡效果漸進式地出現。

使用以上代碼，你可以輕松創(chuàng)建出一個漂亮的CSS文字氣泡效果，用于各種網站設計需求。