'HTML Styling and tooltip issues in table

I am very new to html/CSS and got several issues with a table that I am unable to solve on my own.

Description

I use a empty-cells: hide; command to mask the first cell of the table, that is empty.

On the first cell of column MIN (row: name1 and col:MIN), I have built a tooltip using methodology provided by w3schools. This tooltip takes the form of a mini table, that is visible when the cell is hovered. This tooltip table is included in a div directly in a td of the main table.

I also use an outline to highlight the hovered table cell with a black rectangle.

Here is the Fiddle

Unsolved issues

the empty-cells: hide; command does not seem to have any effect
the bottom and right borders around the "tooltiped" cell disappears on Firefox, but not on Chrome.
the outline rectangle if you hover around the "tooltiped" cell are buggy with both Firefox and Chrome, the rectangle being partially cut
On Firefox only, when hovering on the "tooltiped" cell, the outline rectangle surrounds not only the cell, but the cell plus the tooltip. I have tried to limit the scope of the outline to the direct td children of the main table using .std_table > tr > td:hover instead of .std_table td:hover. But in this case the hovering does not work at all.
the tooltip does not disappear when the mouse is not anymore over the cell, if the mouse goes over the tooltip itself. I don't know if there is a way of avoiding this
The two cells with orange text should have a blueish background using background: #D6EAF8; but is not working

html code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>VerificationReport</title>
  <link href="simplif_styles.css" rel="stylesheet">
</head>

<body>

      <div style="overflow-x:auto;" class="d_summary_table" id="Cell1_TRAN_Summary">
      <table class="summary_table std_table" id="tsum__Cell1__TRAN__View1">
      <caption style="caption-side:bottom">Summary</caption>
      <tr><td colspan="14"></td><td class="grey_background" colspan="9">Corner of MIN</td><td class="grey_background" colspan="9">Corner of MAX</td></tr>
      <tr><th>Extract</th><th>spec_min</th><th>spec_max</th><th>SEV</th><th>Alter</th><th>PARAM1</th><th>PARAM2</th><th>MIN</th><th>TYP</th><th>MAX</th><th>m-3s</th><th>m+3s</th><th>STD_DEV</th><th>3s/m (%)</th><th>mos</th><th>res</th><th>cap</th><th>diode</th><th>bip</th><th>cmom</th><th>cap_otp</th><th>vdd</th><th>TEMPERAT</th><th>mos</th><th>res</th><th>cap</th><th>diode</th><th>bip</th><th>cmom</th><th>cap_otp</th><th>vdd</th><th>TEMPERAT</th></tr>
      <tr class="row_oos"><td class="td_link_summary_table td_tooltip" title="Unit:s&#10;Some description for the extract ...">name1</td><td>-</td><td>2e-06</td><td>0</td><td>FRESH</td><td>1.8</td><td>2</td>
        <td class="tooltip">1.200e-06
          <div class="tooltiptext">
            <table class="spec_tooltip">
            <tr><th></th><th>SPEC_MIN</th><th>SPEC_MAX</th></tr>
            <tr><th class="right_text">rel</th><td class="green_text">10.00%</td><td class="red_text">5.00%</td></tr>
            <tr><th class="right_text">abs</th><td class="green_text">2.000e-12</td><td class="red_text">1.000e-12</td></tr>
            </table>
          </div>
        </td>
        <td>3.100e-06</td><td class="cell_oos_sev0">3.600e-04</td><td>1.500e-06</td><td class="cell_oos_minor">5.000e-07</td><td>2.700e-08</td><td>7.300</td><td>typ</td><td>typ</td><td>ctyp</td><td>typ</td><td>ctyp</td><td>ctyp</td><td>cnom</td><td>1.8</td><td>25</td><td>typ</td><td>typ</td><td>ctyp</td><td>typ</td><td>ctyp</td><td>ctyp</td><td>cnom</td><td>1.8</td><td>25</td></tr>
      <tr class="row_waive"><td class="td_link_summary_table td_tooltip">name2</td><td>-</td><td>2e-06</td><td>1</td><td>AGED</td><td>1.8</td><td>2</td><td>1.200e-06</td><td class="cell_oos_sev1_waived">3.100e-06</td><td class="cell_oos_sev1_waived">5.020e-04</td><td>1.550e-06</td><td>2.040e-07</td><td>2.700e-08</td><td>7.300</td><td>typ</td><td>typ</td><td>ctyp</td><td>typ</td><td>ctyp</td><td>ctyp</td><td>cnom</td><td>1.8</td><td>25</td><td>typ</td><td>typ</td><td>ctyp</td><td>typ</td><td>ctyp</td><td>ctyp</td><td>cnom</td><td>1.8</td><td>25</td></tr>
      <tr><td class="td_link_summary_table td_tooltip">name3</td><td>-</td><td>2e-06</td><td>1</td><td>AGED</td><td>1.8</td><td>2</td><td>1.200e-06</td><td>3.100e-06</td><td>5.000e-04</td><td>1.500e-06</td><td>1.100e-07</td><td>2.700e-08</td><td>7.300</td><td>typ</td><td>typ</td><td>ctyp</td><td>typ</td><td>ctyp</td><td>ctyp</td><td>cnom</td><td>1.8</td><td>25</td><td>typ</td><td>typ</td><td>ctyp</td><td>typ</td><td>ctyp</td><td>ctyp</td><td>cnom</td><td>1.8</td><td>25</td></tr>
      </table>
     </div>

</body>
</html>

CSS code


body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}
.std_table {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  padding: 0px 6px;
  font-size: 12px;
}

.std_table th {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  padding: 2px 6px;
  background: #ddd;
  cursor: pointer;
}

.std_table td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  padding: 2px 6px;
  background: white;
}

.std_table td:hover {
  outline: solid;
  outline-offset: -1px;
  outline-color: black;
}

.summary_table {
  empty-cells: hide;
}

.std_table .grey_background {
  background-color: #ddd;
}

.td_link_summary_table {
  cursor: pointer;
  color: blue;
  font-weight: bold;
}

/************************************************************************************
  Generic text formatting
************************************************************************************/

.left_text {
  text-align: left;
}

.right_text {
  text-align: right;
}

.green_text {
  color: green;
}

.red_text {
  color: red;
}


/************************************************************************************
  Spec tooltips
************************************************************************************/

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -26px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip {
  position: relative;
}

.spec_tooltip {
  padding: 0px;
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  font-size: 12px;
}

.spec_tooltip th {
  cursor: none;
  background: #D6EAF8;
}

/************************************************************************************
  Cell styles with status
************************************************************************************/

.cell_oos_sev0 {
  color: red;
  font-weight: bold;
}

.cell_oos_sev0_waived {
  color: red;
  font-weight: bold;
  background: #D6EAF8;
}

.cell_oos_sev1 {
  color: darkorange;
  font-weight: bold;
}

.cell_oos_sev1_waived {
  color: darkorange;
  font-weight: bold;
  background: #D6EAF8;
}

.cell_oos_minor {
  font-weight: bold;
}

.cell_oos_minor_waived {
  font-weight: bold;
  background: #D6EAF8;
}

Here is the Fiddle

html css tooltip

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'HTML Styling and tooltip issues in table

Sources

Related Questions