Question

I’m having trouble with a jQuery tooltip. The tooltip shows up but it sits on top of an “a” tag html element and it flickers when the tooltip itself is hovered (the tooltip is an image and shows inside the a tag area). Open to other implementation suggestions but I’d prefer not to use a plugin.

Any help appreciated!

THE JS:

$("#myContainer li a").hover(
        function ()
        {
            var tip = $(this).attr("title");
            $(this).attr("title", "");
            $(this).before("<div id='tooltip'>" + tip + "</a>");
            $("#tooltip").fadeIn("slow");
        },
        function ()
        {
            $(this).attr("title", $("#tooltip").html());
            $("#myContainer li").children("div#tooltip").remove();
        }
    );

The HTML:

<div id="myContainer">
   <li>
       <a href="mylink.html" title="get started">Hello</a>
   </li>
    <li>
       <a href="myotherlink.html" title="get started">Hello Again!</a>
   </li>
</div>

The CSS:

#myContainer li
{
    background-color:#ffffff;
    float: left;
    list-style:none;
    margin: 12px 0;
    padding: 0;    
    width: 240px;   
    overflow:hidden;
}
#myContainer li a
{
    width:100%;
    height:100%;
    display:block;
    border:1px solid blue;
}
#tooltip 
{
   background-image:url(tooltip_background.png);
   background-repeat:no-repeat;
   background-position:52% center;
   display:block;
   position:absolute;
   z-index:9999;
   height:99px;
   width:240px;
   padding:0;
   margin:-40px 0 0;
   text-indent:-9999px;
}

The problem is that the tooltip shows up (has to show up) on top of the a element, so when you go over the tooltip itself, it flickers.

Answer 1

You have a lot of CSS mistakes there this is why it will not work. Your JS just works fine.
A absolute element is always relative to the closest parent that is positioned relatively:

http://jsfiddle.net/sXSHp/

Also it is recommended that you give at least a top and a left position to absolute positioned elements, in order to avoid unwanted results.

but you could do this with css only:
http://jsfiddle.net/sXSHp/1/