title: Tooltips, CSS only, Show text tooltip on mouseover using a class to define the text
body: <p>I'm fairly new to CSS, but have what seems to be an unique question.
  I have a TL;DR if you want to skip to it.</p>
  
  <p>I've seen MANY tutorials on how to display tooltips, but none answer this exact scenario, so it may not be possible.</p>
  
  <p>Backstory:
  I've been playing around with tables to show a calendar and have made it so I can simply change the class of a td cell to change the background colour.</p>
  
  <p>This allows me to very easily edit my HTML, changing a single class on each line to change a date from available to booked. For instance:</p>
  
  <pre><code>HTML: &lt;td class="b"&gt;1&lt;/td&gt;
  CSS: .b {  color: #FFFFFF; background-color: #CC0033; font-size: 12px; text-align: center}
  </code></pre>
  
  <p>in my CSS, I have the "b" set to turn the background red, indicating this date is no longer available.</p>
  
  <pre><code>HTML: &lt;td class="a"&gt;1&lt;/td&gt;
  CSS: .a { font-size: 12px; text-align: center}
  </code></pre>
  
  <p>The above would have no background colour and would indicate the date is available.</p>
  
  <p>Now, I have been able to get a tooltip to show based on what class the cell is set to, but it seems I have to set every cell with the text, like this:</p>
  
  <pre><code>&lt;td class="a"&gt;1&lt;span class="tooltiptext"&gt;Tooltip text here&lt;/span&gt;&lt;/td&gt;
  </code></pre>
  
  <p>which I guess is a way to do it, but it takes more time to edit, and I want it so I can display 2-3 different messages depending on which class I select in the td class.</p>
  
  <p>So the question:
  Is there a way I can set it up so,</p>
  
  <p>If the td class = "a", a tooltip will show up saying "Available"</p>
  
  <p>OR If the td class = "b", a tooltip will show up saying "Booked"</p>
  
  <p>OR If the td class = "r", a tooltip will show up saying "Reserved"</p>
  
  <p>when I mouseover the cell, without having to set those responses over and over again in every td cell.
  IE: Without doing something like this:</p>
  
  <pre><code>&lt;td class="a"&gt;1&lt;span class="tooltiptext"&gt;Available&lt;/span&gt;&lt;/td&gt;
  &lt;td class="b"&gt;2&lt;span class="tooltiptext"&gt;Booked&lt;/span&gt;&lt;/td&gt;
  &lt;td class="r"&gt;3&lt;span class="tooltiptext"&gt;Reserved&lt;/span&gt;&lt;/td&gt;
  &lt;td class="b"&gt;4&lt;span class="tooltiptext"&gt;Booked&lt;/span&gt;&lt;/td&gt;
  &lt;td class="b"&gt;5&lt;span class="tooltiptext"&gt;Booked&lt;/span&gt;&lt;/td&gt;
  &lt;td class="b"&gt;6&lt;span class="tooltiptext"&gt;Booked&lt;/span&gt;&lt;/td&gt;
  &lt;td class="a"&gt;7&lt;span class="tooltiptext"&gt;Available&lt;/span&gt;&lt;/td&gt;
  &lt;td class="b"&gt;8&lt;span class="tooltiptext"&gt;Booked&lt;/span&gt;&lt;/td&gt;
  &lt;td class="b"&gt;9&lt;span class="tooltiptext"&gt;Booked&lt;/span&gt;&lt;/td&gt;
  </code></pre>
  
  <p>I'd rather it was simply like this:</p>
  
  <pre><code>&lt;td class="a"&gt;1&lt;/td&gt;
  &lt;td class="b"&gt;2&lt;/td&gt;
  &lt;td class="r"&gt;3&lt;/td&gt;
  &lt;td class="b"&gt;4&lt;/td&gt;
  &lt;td class="b"&gt;5&lt;/td&gt;
  &lt;td class="b"&gt;6&lt;/td&gt;
  &lt;td class="a"&gt;7&lt;/td&gt;
  &lt;td class="b"&gt;8&lt;/td&gt;
  &lt;td class="b"&gt;9&lt;/td&gt;
  </code></pre>
  
  <p>and the tooltip text set elsewhere, but displayed on mouseover depending on which td class was set.</p>
  
  <p>I feel I'm explaining this really badly.</p>
  
  <hr>
  
  <p>Here is a snippet of my CSS using "t" as a test class, just in case you need it. Please don't worry about the formatting or positioning of the tooltip yet, I can fix that easily enough if I can get it working how I want:</p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>and the relevant piece of HTML:</p>
  
  <pre><code>                                &lt;tr&gt; 
                                      &lt;td class="t"&gt;1&lt;span class="tooltiptext"&gt;Test Message&lt;/span&gt;&lt;/td&gt;
                                      &lt;td class="b"&gt;2&lt;/td&gt;
                                      &lt;td class="b"&gt;3&lt;/td&gt;
                                      &lt;td class="b"&gt;4&lt;/td&gt;
                                      &lt;td class="b"&gt;5&lt;/td&gt;
                                      &lt;td class="b"&gt;6&lt;/td&gt;
                                      &lt;td class="a"&gt;7&lt;/td&gt;
                                  &lt;/tr&gt;
  </code></pre>
  
  <p>So, in the above, can I relocate the span somewhere else so it only appears once, and is referenced depending on which td class is defined, and have 2 other spans with different messages, which are defined by the td class "a" and "b"?</p>
  
  <p>An ideal solution to this would be something I can do in the CSS like this:</p>
  
  <pre><code>.t .tooltiptext {custom-text: "This text will display on hover"; 
  visibility: hidden; 
  width: 120px; 
  Etc...
  }
  </code></pre>
  
  <hr>
  
  <p>TL;DR Is there a 'CSS only' way of making the tooltip text display different text by only changing the td class?</p>