Tooltips，CSS only，使用類定義文本在鼠標懸停上顯示文本工具提示

Question

我對CSS很新，但似乎是一個獨特的問題。 我有一個TL; DR如果你想跳過它。

我見過很多關於如何顯示工具提示的教程，但沒有人回答這個確切的情況，所以它可能是不可能的。

Backstory： 我一直在玩桌子來顯示一個日曆，並已做到這一點，我可以簡單地改變一個td單元格的類來改變背景顏色。

這使我可以非常輕鬆地編輯我的HTML，更改每行上的單個類以將日期從可用更改爲預訂。例如：

HTML: <td class="b">1</td> 
CSS: .b { color: #FFFFFF; background-color: #CC0033; font-size: 12px; text-align: center} 

在我的CSS，我有「b」設置爲背景紅色，表明這個日期不再可用。

HTML: <td class="a">1</td> 
CSS: .a { font-size: 12px; text-align: center} 

上面沒有背景顏色，表示日期可用。現在

，我已經能夠得到一個提示，以示出基於什麼類的單元被設置爲，但似乎我的每一個細胞設置與文本，就像這樣：

<td class="a">1<span class="tooltiptext">Tooltip text here</span></td> 

這我想是一種方法，但它需要更多時間來編輯，而且我希望它能顯示2-3個不同的消息，這取決於我在td類中選擇哪個類。

所以問題： 有沒有一種方法，我可以將它設置這樣，

如果TD類=「A」，一個工具提示會顯示出來說：「可用」

或如果TD CLASS =「b」，一個工具提示會顯示出來說「預訂」

或如果TD類=「R」，一個工具提示會顯示出來說「保留」

當我將鼠標放置電池，而無需在每個td單元中一遍又一遍地設置這些響應。 IE：如果沒有做這樣的事情：

<td class="a">1<span class="tooltiptext">Available</span></td> 
<td class="b">2<span class="tooltiptext">Booked</span></td> 
<td class="r">3<span class="tooltiptext">Reserved</span></td> 
<td class="b">4<span class="tooltiptext">Booked</span></td> 
<td class="b">5<span class="tooltiptext">Booked</span></td> 
<td class="b">6<span class="tooltiptext">Booked</span></td> 
<td class="a">7<span class="tooltiptext">Available</span></td> 
<td class="b">8<span class="tooltiptext">Booked</span></td> 
<td class="b">9<span class="tooltiptext">Booked</span></td> 

我寧願它只不過是這樣的：

<td class="a">1</td> 
<td class="b">2</td> 
<td class="r">3</td> 
<td class="b">4</td> 
<td class="b">5</td> 
<td class="b">6</td> 
<td class="a">7</td> 
<td class="b">8</td> 
<td class="b">9</td> 

和其他地方設置提示文本，但在鼠標懸停顯示，這取決於TD類是組。

我覺得我解釋得很糟糕。

---

這是我的CSS中使用「t」作爲測試類的片段，以防萬一您需要它。請不要擔心提示的格式或定位呢，我可以解決這個問題很容易不夠的，如果我能得到它的工作我多麼希望：

.t { color: #FFFFFF; background-color: #FFA500; font-size: 12px; text-align: center; title:"Example";} 
.t:hover .tooltiptext{ visibility: visible; } 
.t .tooltiptext {visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; } 

和有關HTML的一部分：

       <tr> 
            <td class="t">1<span class="tooltiptext">Test Message</span></td> 
            <td class="b">2</td> 
            <td class="b">3</td> 
            <td class="b">4</td> 
            <td class="b">5</td> 
            <td class="b">6</td> 
            <td class="a">7</td> 
           </tr> 

所以，在上面，我可以重新定位跨度在其他地方，所以它只出現一次，並且根據定義的td類來引用，還有另外兩個帶有不同消息的跨度，它們由td類「a 「和」b「？

到這是一個理想的解決辦法是什麼事情我可以在CSS中這樣做：

.t .tooltiptext {custom-text: "This text will display on hover"; 
visibility: hidden; 
width: 120px; 
Etc... 
} 

---

TL; DR是否有作出提示文本顯示不同文本的「CSS唯一」的方式通過只改變TD類？

Answer 1

不幸的是純CSS您不能

• 搬遷span別的地方（僅在Javascript，jQuery的，等等等等）

但是，如果每個td與特定的類有一個span元素你可以用這種方式顯示不同的文字：

span { 
 
    display:none; 
 
    /*Etc etc*/ 
 
} 
 
td:hover span { 
 
    display:inherit; 
 
} 
 
.a span:after { 
 
    content: 'something about class A'; 
 
} 
 
.b span:after { 
 
    content: 'something about class B'; 
 
}

<table> 
 
    <tr> 
 
    <td class="a">1<span></span></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="b">2<span></span></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="a">3<span></span></td> 
 
    </tr> 
 
</table>