Question

我对CSS很新，但看起来似乎是一个独特的问题。我有一个TL; DR如果你想跳过它。

我已经看过很多关于如何显示工具提示的教程，但没有人回答这个确切的情况，所以可能无法实现。

背景故事：我一直在玩桌子来显示日历，并且已经制作了所以我可以简单地改变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 class =“a”，工具提示将显示“可用”

或者如果td class =“b”，工具提示会显示“预订”

或者如果td class =“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类。

我觉得我的解释非常糟糕。

以下是我使用“t”作为测试类的CSS片段，以防万一你需要它。请不要担心工具提示的格式或定位，如果我能按照自己的方式工作，我可以轻松解决这个问题：

.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>

因此，在上面，我可以将span重新定位到其他地方，因此它只出现一次，并根据定义的td类进行引用，并且还有另外两个具有不同消息的跨度，这些消息由td类定义“一个“和”b“？

理想的解决方案就是我可以在CSS中做这样的事情：

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

TL; DR是否有“仅CSS”方式通过仅更改td类使工具提示文本显示不同的文本？

Answer 1

不幸的是，在纯CSS中你不能

将10重新定位到其他地方（仅限Javascript，Jquery等）

但如果具有特定类的每个span都有td元素，则可以这种方式显示不同的文本：

＆＃13;

span

＆＃13;

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';
}

＆＃13;

工具提示，仅限CSS，使用类定义文本

1 个答案: