Try to search your question here, if you can't find : Ask Any Question Now ?

CSS visibility rule for Tooltip doesn't work

HomeCategory: stackoverflowCSS visibility rule for Tooltip doesn't work
Avatarpragati asked 4 months ago

display: none; vs visibility: hidden;

I know that “display: none;” will not take space and “visibility: hidden;” will take space when hidden.

Then why is this tooltip defined by “visibility: hidden;” is NOT taking space? It is acting like “display: none;”

In short, the tooltip should not overlap the text beneath it, right?

.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>
<body style="text-align:center;">

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

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

1 Answers
Best Answer
AvatarFernando answered 4 months ago
Your Answer

15 + 4 =

Popular Tags

WP Facebook Auto Publish Powered By :