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>