Как сделать так, чтобы дочерний элемент появлялся поверх родительского элемента внутри таблицы tr? - PullRequest
Новая
       0

Как сделать так, чтобы дочерний элемент появлялся поверх родительского элемента внутри таблицы tr?

1 голос
/ 11 марта 2020

У меня есть таблица в левом меню с полосой прокрутки, и у меня есть всплывающая подсказка для каждой строки в таблице. Мое требование - показать Подсказка на Верх из Полоса прокрутки вправо, но кое-как я не могу этого достичь.

Проблема в том, что подсказка появляется за полосой прокрутки и телом. Мне нужно показать его в верхней части полосы прокрутки вправо.

У меня есть позиция "Относительный" для родительского элемента Div и "Абсолютный" для дочернего элемента. Z-индекс здесь также не работает.

HTML: 

<div class="ResultsWrapper">
  <table class="ResultsTable">
    <tr>
       <td class="hasTooltip">
          <div class="SerialNumberContainer">
             <div class="SerialNumber">3119985815206</div>
             <div class="SerialNumberTooltip">3119985815206</div>
         </div>
      </td>
    </tr>
 </table>
</div>

CSS: 

.SerialNumberContainer {
   position: relative;
   z-index: 10;
}

.SerialNumberTooltip {
    position: absolute;
    top: 10px;
    left: 40px;
    background-color: #FFF;
    border: 1px solid #CCC;
    display: none;
}

.SerialNumberContainer:hover {
    z-index: 20;
}

.SerialNumberContainer:hover .SerialNumberTooltip {
    display: block;
    z-index: 40;
}

Пожалуйста, проверьте приведенную ниже скрипку.

Полный пример в скрипте

Благодарим Вас за помощь.

Ответы [ 3 ]

1 голос
/ 11 марта 2020

Это обходной путь: 1. Изменение html структура: 

<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>

Использование псевдоэлементов для целевого атрибута div. (добавление до после css)

удалить позицию: относительно которой была подсказка в зависимости.

Удален верхний и левый атрибуты, поскольку они зависят от относительного положения и заменены на запас.

Ниже приведен фиксированный код: 

.ResultsWrapper {
    width:150px;
    height:314px;
    text-align:center;
    overflow-x:hidden;
    overflow-y:scroll;
    border:1px solid black;
}
.ResultsTable {
    width:86px;
    border-collapse:collapse;
    table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
    border:1px solid black;
    text-overflow:ellipsis;
}
.ColumnSerialNo {
    width:81px;
}

.SerialNumberContainer {
    z-index: 10;
}

.SerialNumber {
    width: 80px;
    overflow: hidden;
}
.SerialNumber:hover::before {
    position: absolute;
    content:attr(data-before-content);
    margin:10px 0 0 50px;
    background-color: #fff;
    border: 1px solid #CCC;
    display: block;
    z-index:9999;
}
.SerialNumber:hover{}
<div class="ResultsWrapper">
    <table class="ResultsTable">
        <thead>
            <tr>
                <th class="ColumnSerialNo">Serial Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="aaaaaaa3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr><tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            
        </tbody>
    </table>
</div>
1 голос
/ 11 марта 2020

Я думаю, вы можете использовать обертку class ( .TooltipWrapper в HTML) следующим образом: 

document.querySelectorAll('.SerialNumber').forEach(function(el){
  el.addEventListener('mousemove',function(ele){
    var x = ele.pageY;
    el.parentNode.querySelector('.TooltipWrapper').style.top = `${x}px`;
  });
});
.ResultsWrapper {
  width:150px;
  height:314px;
  text-align:center;
  overflow-x:hidden;
  overflow-y:scroll;
  border:1px solid black;
}
.ResultsTable {
  width:86px;
  border-collapse:collapse;
  table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
  border:1px solid black;
}
.ColumnSerialNo {
  width:81px;
}

.SerialNumber {
  width: 80px;
  overflow: hidden;
}

.TooltipWrapper {
  position: absolute;
  visibility: hidden;
  
}
.hasTooltip:hover .TooltipWrapper {
  visibility: visible;
  opacity: 1;
}

.SerialNumberTooltip {
  display: block;
  --margin-top: -20px;
  margin-left: 85px;
  background-color: #FFF;
  border: 1px solid #CCC;
}
<div class="ResultsWrapper">
  <table class="ResultsTable">
    <thead>
      <tr>
        <th class="ColumnSerialNo">Serial Number</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815206</div>
            <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815206</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815207</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815207</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815208</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815208</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815209</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815209</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815210</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815210</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815211</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815211</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815212</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815212</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815213</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815213</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815214</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815214</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815215</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815215</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815216</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815216</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815217</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815217</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815218</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815218</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815219</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815219</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815220</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815220</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815221</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815221</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815222</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815222</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815223</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815223</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815224</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815224</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815225</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815225</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815226</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815226</div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
0 голосов
/ 11 марта 2020

Нельзя поместить элемент на полосу прокрутки, используя абсолютное положение и z-индекс. Если вы хотите показать элемент поверх полосы прокрутки, вам нужно использовать элемент с фиксированным положением. 

.ResultsWrapper {
    width:150px;
    height:314px;
    text-align:center;
        overflow-y:scroll;
    border:1px solid black;
    z-index:-1;
}
.ResultsTable {
    width:86px;
    border-collapse:collapse;
    table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
    border:1px solid black;
    text-overflow:ellipsis;
}
.ColumnSerialNo {
    width:81px;
}

.SerialNumberContainer {
    position: relative;
    z-index: 10;
}

.SerialNumber {
    width: 80px;
    overflow: hidden;
}

.SerialNumberTooltip {
    position: fixed;
    top: 10px;
    left: 70px;
    background-color: #FFF;
    border: 1px solid #CCC;
    display: none;
    z-index:99999999999;
}

.SerialNumberContainer:hover {
    z-index: 20;
}

.SerialNumberContainer:hover .SerialNumberTooltip {
    display: block;
    z-index: 40;
}
<div class="ResultsWrapper">
    <table class="ResultsTable">
        <thead>
            <tr>
                <th class="ColumnSerialNo">Serial Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Проверьте приведенный ниже jsfiddle.

http://jsfiddle.net/rajeevRF/eoc8yv5a/5/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...