Question

I have a simple tooltip that has the following CSS

/* tooltip for buttons */
a.tooltip{position:relative; z-index:24;text-decoration:none}
a.tooltip:hover{z-index:25;}
a.tooltip span{display: none}
a.tooltip:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1.1em; left:1.1em; width:10em;
    border:1px solid #6e7044;
    background-color:#feffe1; color:#6e7044;
    text-align: center}

This works properly for me in the normal case.

But if I have a div which has a pre-defined height and overflow-y:auto;, i have 2 problems

1. the tooltip gets cut off. ( goes under the divs scrollbar)
2. there happens an unwanted overflow-x to accomadate the span that has tool tip.

Example fiddle: http://jsfiddle.net/naveen/2ur3Q/

How could I correct this?

Answer 1

To keep your existing solution with minimal changes you might want to try this JavaScript solution – http://jsfiddle.net/8yeDy/

Just delete all the span-s from the markup, attach some JS

$('a').mouseover(function() {
     $(this).parent().append('<span>Eliminate(Delete)</span>');
 }).mouseleave(function() {
     $(this).siblings('span').remove();
 })

and a few changes to CSS (the span is not in <a> anymore – just on its own)

span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
        left:10.8em; width:10em;
    border:1px solid #6e7044;
    background-color:#feffe1; color:#6e7044;
    text-align: center;
    margin-top:-1.8em;
}