0

Есть такая таблица:

<table border="1" width="700px">
<tr>
  <td class='name-product' name="name-product-001">
    какой-то непонятный текст
    <div class='tooltip-product' name="tooltip-product-001">
                Что-то написано <br> в несколько <br> строк.
        </div>
  </td>
</tr>
<tr>
  <td class='name-product' name="name-product-002">
    какой-то непонятный текст  
    <div class='tooltip-product' name="tooltip-product-002">
                Что-то написано <br> в несколько <br> строк.
        </div>
  </td>
</tr>
<tr>
  <td class='name-product' name="name-product-003">
    какой-то непонятный текст  
    <div class='tooltip-product' name="tooltip-product-003">
                Что-то написано <br> в несколько <br> строк.
        </div>
  </td>
</tr>
</table>

Стилями и jquery div в каждой строке скрыт Нужно, чтобы при наведении на строку div из неё появлялся поверх всей таблицы, а при наведении на div или уходе из ячейки - прятался.

Мои попытки тут: http://jsfiddle.net/bahdpv62/7/ Всё прячется и появляется, но под элементами таблицы.

Помогите разобраться.

2
  • 1
    Внутренний элемент с z-index, не может перекрыть внешние элементы, которые перекрывают родителя этого элемента... Надо делать один единственный блок, который будет вообще вне таблицы, с высоким z-index перекрывать всё. И наполняться контентом-показываться во время наведения. 28 ноя 2019 в 9:11
  • К сожалению, такой вариант не подходит, т. к. таблица генерируется php на сервере данными из БД. Т. е. каждая строка - это отдельный товар, а во всплывающем div-е - его параметры.
    – Garuda
    28 ноя 2019 в 12:19

1 ответ 1

0

Таблица генерируется php (с) — одно другому не мешает. Пример всплывающего описания:

setTableTooltip();

function setTableTooltip() {
  var tip = createTipBlock();
  var tipWid = tip.offsetWidth;
  var limit = document.body.offsetWidth - tipWid;
  // Ширина страницы - ширина подсказки = точка, после которой блок выходит за экран.

  tip.style.display = "none";
  // Нельзя узнать offsetWidth невидимого элемента (дает 0), поэтому узнал, потом скрыл.

  var tdProduct = document.querySelectorAll('td.name-product');

  [].slice.call(tdProduct).forEach(function(td) {

    td.addEventListener('mouseenter', function(e) {
      tip.innerHTML = td.querySelector('.tooltip-product').innerHTML;
      tip.style.display = "block";
    });

    td.addEventListener('mousemove', function(e) {
      var shift = (e.pageX > limit) ? (tipWid + 20) : 0;
      // Если выходим за рамки страницы - сдвиг в размере ширины всплывающего блока.

      tip.style.left = e.pageX + 10 - shift + 'px';
      tip.style.top = e.pageY + 10 + 'px';
    });

    td.addEventListener('mouseleave', function() {
      tip.style.display = "none";
    });

  });


  function createTipBlock() {
    var tip = document.createElement('div');
    tip.className = "tooltip";

    document.body.appendChild(tip);
    return tip;
  }
}
.common-table { border-collapse: collapse; }
.common-table td { width: 700px; border: 1px solid #b89868; padding: 5px; }
.common-table tr:nth-child(2n) { background-color: #fff1ba; }
.common-table tr:nth-child(2n-1) { background-color: #ffe2aa; }

.name-product { cursor: pointer; }

.tooltip-product { display: none; }

.tooltip {
  position: absolute;
  z-index: 999;
  border: 4px solid #ffe2aa;
  width: 300px;
  padding: 5px;
  background-color: #fff;
  box-shadow: 1px 1px 5px #000, 0 0 0 1px #800, inset 0 0 0 1px #a77;
}
<table class="common-table">
  <tr>
    <td class='name-product' name="name-product-001">
      какой-то непонятный текст
      <div class='tooltip-product' name="tooltip-product-001">
        Что-то написано<br>в несколько<br>строк 1111.
      </div>
    </td>
  </tr>
  <tr>
    <td class='name-product' name="name-product-002">
      какой-то непонятный текст
      <div class='tooltip-product' name="tooltip-product-002">
        Что-то написано<br>в несколько<br>строк 2222.
      </div>
    </td>
  </tr>
  <tr>
    <td class='name-product' name="name-product-003">
      какой-то непонятный текст
      <div class='tooltip-product' name="tooltip-product-003">
        Что-то написано<br>в несколько<br>строк 3333.
      </div>
    </td>
  </tr>
</table>

1
  • Спасибо большое. Это оказалось тем решением, которое мне было нужно. Всё работает как надо.
    – Garuda
    3 дек 2019 в 9:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.