Отображение текстового поля при наведении (в таблице) - PullRequest
Новая
       34

Отображение текстового поля при наведении (в таблице)

0 голосов
/ 28 сентября 2018

Я уже некоторое время пытаюсь создать текст при наведении курсора в моей таблице.Я пытался добавить это для парения над этим <td class="text-left" id="caster_num">1</td>, но мне пока не повезло.Я следил за этим https://www.w3schools.com/css/css_tooltip.asp и https://www.w3schools.com/howto/howto_css_tooltip.asp. Может ли кто-нибудь помочь мне?

* Я хочу, чтобы текст отображался поверх текста (в данном случае "1").

Спасибо. 

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>

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

Вот решение только для CSS, но мне пришлось немного изменить ваш html.Не уверен, что вы хотите, чтобы всплывающая подсказка закрывала триггер или располагалась над ним, но этот пример просто помещает всплывающую подсказку прямо справа от триггера.Вы можете изменить в соответствии со своими потребностями.

Если вы не хотите включать дополнительные span, вам понадобится дополнительный JavaScript, чтобы получить содержимое предыдущего td.

Все это основано на 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;
}
0 голосов
/ 28 сентября 2018

Вы можете навести курсор на строку и затем применить некоторые CSS 

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