Tooltip changes position on few images - html

Question

I am building a website and ran into another problem with my code.
I have tooltips for a huge number of images so that when you hover over them you see information in the tooltip ( which is also an image)
My Problem is that when I hover the first few images they display the tooltip different then the rest of them.
My code looks like this:
.playertooltipimg{
width: 400px;
height: auto;
}
.playertooltipimg {
z-index: 100000;
}
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
visibility: hidden;
opacity: 0;
border: 5px solid white;
left:-80.15em;
transition: all 1s ease-in-out;
}
a:hover.tooltips span {
position: absolute;
left:-51.15em;
top: -0.2em;
visibility: visible;
opacity: 1;
transition: all 1s ease-in-out;
z-index: 999;
}
I think it's hard to understand what I mean which is why i created this jfiddle:
BUT you have to adjust the size of the window so that the 2 white boxes can be next to each other (in a row)
http://jsfiddle.net/ZkQLV/
I know it's a lot of code, I can't figure out why it is doing this, since every other images except the first few display the tooltip correctly

Answer 1

Your problem is caused by the use of inline and relative styles for the a (which is the container of the preview item). inline style makes the absolute positioning of the inner span a little strange, you can see that all the items on the second row seem to work OK, it happens only to the items on the first row (except the last item). However if you set display:inline-block for the a elements, you'll see that hovering on all the items won't work now, the popped-up tooltip has always the same offset (on the left side) from the a element (which you hover on). That's because you set position:relative for the a elements. So all the offsets (left and top) of the spans (which you set to some fixed values relative to font-size with em unit) will be compared against the hovered a element's position. To fix this issue, you have to choose the same element for all the items against which the offsets are set. The most suitable item is exactly the div #playersbig which contains all the items. To choose that div as the containing block of the inner span elements (in each item), you have to set its position to relative (which you've already done) but you have to remove the position:relative applied on the a elements.
Another note is that you should use right property to position your tooltip (span element), in the hidden state the right is about 200% (because your 2 divs #championsbig and #playersbig have the same width) while in the shown state, the right should be about 100%. The exact values of right depend on the padding/space width between your 2 divs #championsbig and #playersbig, looks like it's about 4px in your case). You can also use calc function to set the exact value but it's not supported by some old versions of browsers (especially the so-called IE), so I just use 201% and 101% respectively in the demo (because the width is 400px). If the width is fixed at 400px, you can also calculate the exact values for right yourself such as 804px and 404px instead of 201% and 101%.
CSS:
a.tooltips {
/* use this to have the expected absolute positioning
instead of the unexpected behavior when using inline style */
display: inline-block;
}
a.tooltips span {
position: absolute;
visibility: hidden;
opacity: 0;
border: 5px solid white;
top:0;
/* use right instead of left, this will hide the tooltip initially */
right:201%;
transition: all 1s ease-in-out;
}
a:hover.tooltips span {
position: absolute;
/* this will show the tooltip on hovering */
right:101%;
visibility: visible;
opacity: 1;
transition: all 1s ease-in-out;
z-index: 999;
}
Demo.