The css i've got set up is:
The containing div (660px wide) has position set to relative, this way when the user hovers over the tool tip it appears in the same x position each time and the y position varies with the tooltip (so it's like a little popup in the page margin that appears parallel to the link).
What i'm stuck on is positioning it so that it's in line vertically with the anchor. At the moment it appears one line below where i'd like it. I've tried adding in top:-1em, but obviously that just move it to 1em above the div each time. It seems to be like I want the x positioning relative to the container, but the y position relative to the anchor which would clearly cause problems.
Also, when the tooltip span is position outside the div, the width seems to go funny and only allows a single word per line. This is changed by adding a width parameter, but it's not ideal for small tips.
Any suggestions?
Thanks!
Code:
a.tip span {
display:none;
}
a.tip:hover span {
display:block;
position:absolute;
left:670px;
background-color:#F8F8F8;
border: 1px dashed lightgray;
}
What i'm stuck on is positioning it so that it's in line vertically with the anchor. At the moment it appears one line below where i'd like it. I've tried adding in top:-1em, but obviously that just move it to 1em above the div each time. It seems to be like I want the x positioning relative to the container, but the y position relative to the anchor which would clearly cause problems.
Also, when the tooltip span is position outside the div, the width seems to go funny and only allows a single word per line. This is changed by adding a width parameter, but it's not ideal for small tips.
Any suggestions?
Thanks!
Comment