title: Place "Title" text into CSS
body: <p>I have an HTML diary page and I would like to remove lots of duplicated TITLE text from the HTML and place it in a few lines in CSS. So that when the mouse hovers over an item the title text would re-appear. Is this possible?
  My HTML looks like:-</p>
  
  <pre><code>&lt;td class="Provisional-Saturday" title="Provisionally Booked (NO deposit)"&gt;11&lt;/td&gt;
  &lt;td class="Provisional-Sunday" title="Provisionally Booked (NO deposit)" &gt;12&lt;/td&gt;
  &lt;td class="Covid-19-Break" title="Safety day - left empty"&gt;13&lt;/td&gt;
  &lt;td class="Covid-19-Break" title="Safety day - left empty"&gt;14&lt;/td&gt;
  &lt;td class="Available-weekday" title="Not Booked"&gt;15&lt;/td&gt;
  &lt;td class="Available-weekday" title="Not Booked"&gt;16&lt;/td&gt;
  &lt;td class="Available-weekday" title="Not Booked"&gt;17&lt;/td&gt;
  </code></pre>
  
  <p>My CSS looks like:</p>
  
  <pre><code>class^="Available":after, class^="Booked":after, class^="Provisional":after {
  padding: 2px;
  display:none;
  position: relative;
  top: -2px;
  right: -3px;
  width: 50px;
  text-align: left;
  background-color: #fef4c5;
  border: 1px solid #d4b943;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
  }
  class^="Available":hover:after, class^="Booked":hover:after, class^="Provisional":hover:after{
      display: block;
  }
  class^="Available" label:after{
      content: "Not Booked";
  }
  class^="Booked" label:after{
      content: "Booked &amp; Deposit paid";
  }
  class^="Provisional" label:after{
      content: "Booked &amp; Deposit paid";
  }
  class^="Covid" label:after{
      content: "Safety day - left empty";
  }
  </code></pre>
  
  <p>Is this possible, or am I chasing my tail?
  Thanks for any help or guidance offered.</p>