Подсказка не появляется при применении переполнения <table><td>: скрыто

Question

Я недавно применил многоточие на каждом <table> <td> и после этого всплывающая подсказка стала вызывать у меня проблемы.

Если вы удалите класс .table из <table>, тогда вы можете навести курсор на ссылку «Hover Me», чтобы увидеть подсказку, которая работает нормально. Однако после добавления класса у меня возникают проблемы с подсказкой.

Мне нужно решение в следующем примере. Пожалуйста, не предлагайте мне другие решения.

.table {
  width: 100%;
}

.table td, .table th{
    padding: .5rem;
    vertical-align: middle;
}

.table td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em;
}

.table td > div > p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   
}

.tooltip-stylish {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.tooltip-stylish h3 {margin:12px 0;}

.tooltip-stylish .top {
    min-width:400px;
    max-width:500px;
    top:-20px;
    left:50%;
    transform:translate(-30%,-100%);
    padding:10px 20px;
    color:#666666;
    background-color:#FFFFE0;
    font-weight:normal;
    font-size:14px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.tooltip-stylish:hover .top {
    display:block;
}

.tooltip-stylish .top i {
    position:absolute;
    top:100%;
    left:30%;
    margin-left:-15px;
    width:30px;
    height:15px;
    overflow:hidden;
}

.tooltip-stylish .top i::after {
    content:'';
    position:absolute;
    width:15px;
    height:15px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#FFFFE0;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

<table class="table">
<tr>
  <th>
  Column with plain text
  </th>
  <th>
  Column with div
  </th>
  <th>
  Column with tooltip
  </th>
</tr>
<tr>
  <td style="width: 30%;">
  This is plain text
  </td>
  <td style="width: 40%;">
  <div><p><strong style="color: rgb(77, 81, 86);">Hi, I was advised by a Patent Lawyer to publish a new concept (such as Anthropocene as an example) on Wikipedia. I developed this concept and I am in the process of registering the trademark and legal rights to it. During my research on Wikipedia I came across the following and would like to know how a new concept such as Anthropocene got onto Wikipedia, if the following is correctly understood by me.</strong></p></div>
  </td>
  <td style="width: 30%;">
  <div class="tooltip-stylish">
      <a>Hover me</a>
      <div class="top">
          <h4>Tooltip</h4>
          <ul>
              <li>
                  This is a tooltip
              </li>
          </ul>
          <i></i>
      </div>
  </div>
  </td>
</tr>
</table>

Answer 1

.table td {
	max-width: 0;
	overflow: visible;
	text-overflow: ellipsis;
	white-space: nowrap;
}

Вы использовали таблицу td overflow: hidden, где ваша подсказка фактически переполнена. Вы можете использовать overflow: visible Это покажет подсказку.