Why is the vertical scrollbar always visible
<p>Here is my plunker: <a href="http://plnkr.co/edit/q3MpeDT2rSSCUy8CHdUa?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/q3MpeDT2rSSCUy8CHdUa?p=preview</a></p>

<pre><code>div.tooltip {   
    position: absolute;         
    text-align: center;         
    width: 100px;                   
    height: 500px;                  
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;        
    border-radius: 8px;         
    overflow-y: scroll;
}
</code></pre>

<p>When you hover the mouse on one of the circles, a tooltip with vertical scrollbar is always visible even when the height is more than enough for the content.  Why is vertical scroll always visible.  How and I make it show up only when the content actually overflows?</p>