Question

I was wondering if anyone knows why adding overflow-y:scroll into my container CSS removes the tooltip triangle (at the very bottom of the container). This is a working example:

#container{
background-color:rgb(66, 66, 66);
width:500x;
height: 300px;
position:relative;


}

#container::after{
 content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -10px; /*margin-left needs to be the same as border width */
    border-width: 10px;
    border-style: solid;
    border-color: rgb(66, 66, 66) transparent transparent transparent;
}

<div  id="container">
  
</div>

#container{
background-color:rgb(66, 66, 66);
width:500px;
height: 300px;
position:relative;
overflow-y:scroll;

}

#container::after{
 content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -10px; /*margin-left needs to be the same as border width */
    border-width: 10px;
    border-style: solid;
    border-color: rgb(66, 66, 66) transparent transparent transparent;
}

<div id="container">



</div>

The only difference between these two code snippets is the "overflow-y:scroll" property inside #container . If anyone can explain why this happens, I would really appreciate it!

Scrollbar removing tooltip in HTML

0 个答案: