Question

I have the following CSS for a div element:

.tooltip 
{
    padding: .8em;  
    width: 12em; background:#999;  
    border-width: 2px !important;  
    border-color:#999;    
    position:absolute;
}  
.tooltip .pointer, .tooltip .inner-pointer   
{
    position:absolute;
    width:0;  
    height:0;  
    border-bottom-width: 0;  
    background: none;  
}  
.tooltip .pointer {  
    border-left: 7px solid transparent;  
    border-right: 7px solid transparent;  
    border-top: 14px solid #999;  
    bottom:    -14px;  
    right: auto;  
    left: 5%;  
    margin-left: -7px;  
}  
.tooltip .inner-pointer {  
    border-left: 5px solid transparent;  
    border-right: 5px solid transparent;  
    border-top: 5px solid #999;  
    bottom: auto;  
    top: -14px;  
    left: -5px;  
}  

Here is the DIV info

<div class="tooltip">Tooltip content goes here...<div class="pointer"><div class="inner-pointer"></div></div></div>

It the line below it, however cuts into the bottom of this tooltip, how do I make sure that it takes up all the space it is supposed to?

Here is an example in a jsFiddle:

http://jsfiddle.net/WEgBW/1/

Answer 1

Assuming that the problem is that something overlaps your tooltip, then you should add a z-index on the .tooltip

.tooltip 
{
    padding: .8em;  
    width: 12em; background:#999;  
    border-width: 2px !important;  
    border-color:#999;    
    position:absolute;
    z-index: 999; /* added this line */
}