как отобразить всплывающую подсказку чистого css в контейнере с переполнением: скрыто

#html #css

#HTML #css

Вопрос:

Приведенный ниже css отображает всплывающую подсказку из атрибута данных при наведении курсора мыши, но не работает для варианта использования, когда нужно отобразить весь атрибут данных, который td есть overflow: hidden в контейнере.

Удаление overflow: hidden активирует всплывающую подсказку, но уничтожает многоточие.

 html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 64px auto;
  text-align: center;
  font-size: 100%;
  max-width: 640px;
  width: 94%;
}

a:hover {
  text-decoration: none;
}

header,
.demo,
.demo p {
  margin: 4em 0;
  text-align: center;
}

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 <table>
  <tr>
    <td>One</td>
    <td class="name" data-tooltip="dsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd">dsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd</td>
    <td>Three</td>
  </tr>
</table>

Ответ №1:

Вы могли бы поместить текст в <p> тег и добавить overflow:hidden к нему вместо этого?

 html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 64px auto;
  text-align: center;
  font-size: 100%;
  max-width: 640px;
  width: 94%;
}

a:hover {
  text-decoration: none;
}

header,
.demo,
.demo p {
  margin: 4em 0;
  text-align: center;
}

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  /*width: 160px;*/
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.name {}

p {
  overflow: hidden;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

 <table>
  <tr>
    <td>One</td>
    <td class="name" data-tooltip="dsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd">
      <p>dsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd</p>
    </td>
    <td>Three</td>
  </tr>
</table>

Я бы также предложил не ограничивать ширину всплывающей подсказки ( [data-tooltip]:before ), поскольку это сократит ваш текст. Я исправил приведенный выше пример, чтобы прокомментировать ширину.

1. это хорошая идея, к сожалению, мне нужно установить max-length: 0 на td, чтобы она расширялась до всего td. Наличие max-length: 0 в p делает ее невидимой

2. @dagda1 извините, не уверен, что вы имеете в виду — зачем вам нужна ‘max-length: 0’? Не могли бы вы обновить свой код этим?