Прокручиваемый HTML <div>с переполнением сверху - PullRequest
Новая
       9

Прокручиваемый HTML <div>с переполнением сверху

0 голосов
/ 24 мая 2018

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

1 Ответ

0 голосов
/ 24 мая 2018

Насколько я знаю, нет способа предотвратить переполнение всего, кроме определенных элементов.Однако, если вы можете расположить подсказки за пределами прокручиваемого элемента div, вы можете попробовать что-то вроде этого: 

div.outer {
  overflow-y: scroll;
  height: 200px;
  width: 400px;
  border: 1px solid black;
  margin: 30px auto;
 }
 
 div.inner {
   width: 100%;
   height: 100px;
   background-color: lightgrey;
   margin-bottom: 15px;
 }
 
 .tooltip {
    visibility: hidden;
    position: absolute;
    top: 0px;
    width: 80px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
 }
 
 .inner:hover .tooltip {
    visibility: visible;
}
<div class="outer">
  <div class="inner">
    <span class="tooltip">Text 1</span>
  </div>
  <div class="inner">
    <span class="tooltip">Text 2</span>
  </div>
  <div class="inner">
    <span class="tooltip">Text 3</span>
  </div>
</div>
...