Question

so i have a little problem with placing a hover tooltip with jquery – if the “position” attribute in my css for a parent div is set to “relative” then the tooltip flies away to the top left of the screen. If i remove the position attribute, then all is well in the world and the tooltip comes back.

I don’t really get jQuery or css positioning rules too well, so the questions are:

1. why does the position:relative mess up the jQuery tooltip placement?
2. if i did need the position:relative (and i don’t), what could i do to resolve the problem?

the relevant code is:

$("yay").hover(
 function(){
     // .position() uses position relative to the offset parent,
     var pos = $(this).position();
     // .outerWidth() takes into account border and padding.
     var width = $(this).outerWidth();

     var messageToLoad = dumpArray[$(this).attr('class')];
     $(messageToLoad).css({
         left: (pos.left + width) + "px",
         top: pos.top + "px",
         position: "absolute",
         "visibility":"visible",
         "display":"inline"
     });
 },

and then the (offending) css is:

.content {
    margin: 0 0 0 35px;
    position:relative;
}

and the html is:

...
<tr class="PostOdd">
    <td>
    <div class="contents">
        <div class="content">
            <p> Brand new post goes here</p>
            <p class="postDate">June 15, 2012, 4:02 a.m.</p>
            <p class="options">
                <a href="/comments/1/1">
                    <img class="yay" src="/static_files/chat-icon.png">
                </a>
            </p>
        </div>
    </div>
...

UPDATE:

a. i am using jquery only, no other java plugins at all

b. if i remover the “position” attribue to the parent in the css file, then everything works normally. Actually, i have removed it, so this isn’t a problem so much as a curiosity thing for me. I’m working on another section – if i don’t get an answer by the time i’m done with that section, i’ll whip up a jfiddle demo

Answer 1

I think it is happening because the DIV “.content” is the first positioned element. For example, see this structure:

<div class="great-grandfather">

    <div class="grandfather">

        <div class="father">

            <div class="son">

                <img class="yay" src="/static_files/chat-icon.png">

            <div>

        </div>

    </div>

</div>

When you put the mouse over the image with the class “yay”, as it is set with position: absolute, the reference for your position is the first parent element that have a relative or absolute position property.

If the DIV “.son” has a position relative or absolute, the “.yay” image will coordenate your position according “.son”. If is “.father” has, according “.fahter” and so on.

If all parents have a position property, can be relative or absolute, will be considered the first parent element, in this case “.son”.

Hope i can help you with this explanation, if you have some doubt, please leave a comment and i will edit the answer.