Правило видимости CSS для всплывающей подсказки не работает - PullRequest
Новая
       24

Правило видимости CSS для всплывающей подсказки не работает

0 голосов
/ 10 марта 2019

дисплей: нет; vs видимость: скрыто;

Я знаю, что "дисплей: нет"; не займет места и "видимость: скрыто"; займет место, когда скрыто.

Тогда почему эта подсказка определяется как "видимость: скрыто"; НЕ занимает место? Он действует как «display: none;»

Короче говоря, всплывающая подсказка не должна перекрывать текст под ней, верно? 

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<!DOCTYPE html>
<html>
<body style="text-align:center;">

<div class="tooltip">Hover over me
  <div class="tooltiptext">Tooltip text</div>
</div>

<p>Note that the tooltip is overlapping the text beneath it. The text should appear below the tooltip position, right?</p>

</body>
</html>

1 Ответ

0 голосов
/ 10 марта 2019

Удалить эту часть кода.и вы увидите разницу 

/* Position the tooltip */
  position: absolute;
...