Tooltip Width

Tooltip Width

by Srinivas Sangam

HTML

<div id="container" style="margin: 167px 135px 0px 0px; height: 400px">
    <a class="tooltip" tip="television">content1</a>
    <a class="tooltip" tip="By noon yesterday, news television screens were filled with visuals of a Delhi we have been familiarized with over the past year.">content2</a>
</div>

CSS

.tooltip{
   	display: inline;
    position: relative;
    white-space: pre-wrap;       /* css-3 */
    margin: 20px 20px 20px 20px; 
    height: 30px;  
    width: 50px
}
		
.tooltip:hover:after{
    background: #8FBC8F;
    border-radius: 5px;
    bottom: 26px;
    color: #000;
    content: attr(tip);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width:auto;
    min-width:50px;
    max-width:500px;
}
		
.tooltip:hover:before{
    border: solid;
    border-color: #8FBC8F transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}