How to place the tooltip text such that it doesn't take up space when hidden?

Question

https://www.w3schools.com/code/tryit.asp?filename=GG4COP8QYCSM

Following is the code in that link

Here when tooltip is hidden it takes up space.

What is the way to place tooltip divs so that they don't take space when hidden and don't cause other elements to move from their positions?

.border {
  background-color: pink;
  padding: 10px;
  margin: 15px;
}

.parent {
  background-color: red;
  border: 2px solid blue;
  margin: 15 px;
  padding: 5px;
}

.child {
  display: table-cell;
  background-color: white;
  border: 5px solid black;
  margin: 15 px;
  padding: 5px;
}

.tooltipText {
  visibility: hidden;
}

<div class="border">
  <div class="parent">

    <div class="tooltipText"> Tootltip</div>
    <div class="child"> one </div>

    <div class="child"> two </div>
    <div class="child"> three </div>
  </div>
</div>

I made you a snippet but see no tooltip appear here. If you want to toggle the display, you can use `display:hidden` and `display:block` — mplungjan, Jun 24 '20 at 06:20

score 3 · Accepted Answer · answered Jun 24 '20 at 06:21

You can use display:none;

.border {
  background-color: pink;
  padding: 10px;
  margin: 15px;
}

.parent {
  background-color: red;
  border: 2px solid blue;
  margin: 15 px;
  padding: 5px;
}

.child {
  display: table-cell;
  background-color: white;
  border: 5px solid black;
  margin: 15 px;
  padding: 5px;
}

.tooltipText {
  visibility: hidden;
  display:none;
}

<div class="border">
  <div class="parent">

    <div class="tooltipText"> Tootltip</div>
    <div class="child"> one </div>

    <div class="child"> two </div>
    <div class="child"> three </div>
  </div>
</div>

How to place the tooltip text such that it doesn't take up space when hidden?

1 Answers1