5

Here is my plunker: http://plnkr.co/edit/q3MpeDT2rSSCUy8CHdUa?p=preview

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;
}

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?

arhak
  • 2,488
  • 1
  • 24
  • 38
techguy2000
  • 4,861
  • 6
  • 32
  • 48
  • `div.tooltip` has a css property of `overflow-y:scroll;`. This causes the scrollbar to always show. You should change it to `overflow-y:auto;`. This will cause it to show only when needed. – Cave Johnson Nov 14 '16 at 23:10
  • Possible duplicate of [how to hide a vertical scroll bar when not needed](http://stackoverflow.com/questions/9560330/how-to-hide-a-vertical-scroll-bar-when-not-needed) – Cave Johnson Nov 14 '16 at 23:11
  • 1
    Thanks guys. I got confused by the meaning. I thought overflow-y: scroll to mean show scroll when overflow happens :) – techguy2000 Nov 14 '16 at 23:19

1 Answers1

8

just change overflow-y:scroll to overflow-y:auto;

Maxiquester
  • 448
  • 1
  • 3
  • 9