CODEWITHSUNDEEP
htmlcsshtml-tablecss-tablesonhover
CandyGum
CandyGum

Reputation: 511

Showing Text Box On Hover (In Table)

I've been trying for a while now to create a text on hover in my table. I've been trying to add it for hovering over this <td class="text-left" id="caster_num">1</td> but I've had no luck so far. I've been following this https://www.w3schools.com/css/css_tooltip.asp and https://www.w3schools.com/howto/howto_css_tooltip.asp. Could someone please assist me?

*I want the text to show over the text being hovered (in this case the "1").

Thank you.

body {
  background-color: #2c313a;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

div.table-title {
  display: block;
  margin: auto;
  max-width: 600px;
  padding: 5px;
  width: 100%;
}

.table-title h3 {
  color: #fafafa;
  font-size: 30px;
  font-weight: 400;
  font-style: normal;
  font-family: "Roboto", helvetica, arial, sans-serif;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}


/*** Table Styles **/

.table-fill {
  background: white;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 600px;
  padding: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}

th {
  color: #D5DDE5;
  background: #1b1e24;
  border-bottom: 4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size: 23px;
  font-weight: 100;
  padding: 10px;
  text-align: left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}

th:last-child {
  border-right: none;
}

tr {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  color: #666B85;
  font-size: 16px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}

tr:hover td {
  background: #4E5066;
  color: #FFFFFF;
  border-top: 1px solid #22262e;
}

tr:first-child {
  border-top: none;
}

tr:last-child {
  border-bottom: none;
}

tr:nth-child(odd) td {
  background: #EBEBEB;
}

tr:nth-child(odd):hover td {
  background: #4E5066;
}

td {
  background: #FFFFFF;
  padding: 10px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: right;
}
<body>
  <div id="wrapper">

    <table class="table-fill">
      <thead>
        <tr>
          <th class="text-left">Name</th>
          <th class="text-left">Attribute</th>
        </tr>
      </thead>
      <tbody class="table-hover">
        <tr id="caster">
          <td class="text-left">Caster</td>
          <td class="text-left" id="caster_num">1</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Upvotes: 1

Views: 10030

Answers (2)

carbonspace
carbonspace

Reputation: 329

Here's a CSS only solution but I had to modify your html a bit. Not sure if you wanted the tooltip to cover the trigger or to be positioned above it, but this example just puts the tooltip directly to the right of the trigger. You can modify to suit your needs.

If you don't want to include the extra span, you'll need some additional javascript to get the contents of the previous td.

This is all based on https://www.w3schools.com/howto/howto_css_tooltip.asp

https://codepen.io/carbonspace/pen/rqaVzb

HTML

<table class="table-fill">
  <thead>
    <tr>
      <th class="text-left">Name</th>
      <th class="text-left">Attribute</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr id="caster">
      <td class="text-left">Caster</td>
      <td class="text-left tooltipTrigger" id="caster_num">1
        <span class="tooltip">Caster</span>
      </td>
    </tr>
  </tbody>
</table>

CSS

.tooltipTrigger .tooltip {
  display: none;
}
.tooltipTrigger:hover {
  cursor: pointer;
}
.tooltipTrigger:hover .tooltip {
  display: inline;
  position: relative; /* relative to .tooltipTrigger */
  left: 10px;
  border: 1px solid #ccc;
}

Upvotes: 2

bron
bron

Reputation: 1548

You can hover the row and then apply some css

.table-fill tr #caster_num { visibility: hidden; color: transparent; }
.table-fill tr:hover #caster_num { visibility: visible; color: black; }

Upvotes: -1

Related Questions