synaptik synaptik - 5 months ago 7
CSS Question

Pop-up text over table heading: make <SPAN> display centered and above <TH>

The headings of my table are abbreviated dates. I want to pop up the full date directly above the abbreviated date when I hover over the abbreviated date.

Here is an example

<th>
:

<th class="dateHeading">Jun 01<span class="fullDate">Wednesday (06-01-2016)</span></th>


I'm using the following CSS to position and display the
<span>
above the
<th>
:

th.dateHeading {
word-spacing: 9999999px; /* force one word per line (stacking) */
font-size: 70%;
font-weight: normal;
cursor: crosshair;
}

th.dateHeading:hover .fullDate {
display: block;
}

.fullDate {
display: none;
position: absolute;
z-index: 1000;
background: #C8C8C8;
width: 100px;
padding: 5px;
font-size: 120%;
transform: translate(0, -70px);
-webkit-transform: translate(0, -70px);
-o-transform: translate(0, -70px);
-moz-transform: translate(0, -70px);
}


The problem is that the
<span>
is not horizontally centered with the corresponding
<th>
. How can I center it?

Fiddle

Answer

Remove your transform code, Just play with positions, check below:

table {
  margin-top: 50px;
}

th,
td {
  width: 30px;
}

th.tableHeading {
  font-weight: bold;
  font-size: 150%;
  text-align: left;
 
}

th.dateHeading {
  word-spacing: 9999999px;
  /* force one word per line */
  font-size: 70%;
  font-weight: normal;
  cursor: crosshair;
   position: relative;
}

th.dateHeading:hover .fullDate {
  display: block;
}

.fullDate {
  display: none;
  position: absolute;
  top: -45px;
  left: -33px;
  z-index: 1000;
  background: #C8C8C8;
  width: 100px;
  padding: 5px;
  font-size: 120%;
}

.green {
  background-color: #388C43;
  width: 20px;
}

.red {
  background-color: #B22222;
  width: 20px;
}

.rowName {
  width: 100px;
}
<table>
  <thead>
    <tr>
      <th class="tableHeading">My Table</th>
      <th class="dateHeading">Jun 01<span class="fullDate">Wednesday (06-01-2016)</span></th>
      <th class="dateHeading">Jun 16<span class="fullDate">Thursday (06-16-2016)</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rowName">A</td>
      <td class="red">&nbsp;</td>
      <td class="red">&nbsp;</td>
    </tr>
    <tr>
      <td class="rowName">B</td>
      <td class="red">&nbsp;</td>
      <td class="red">&nbsp;</td>
    </tr>
  </tbody>
</table>