Positioning a tooltip relative to another div in JQuery
- by James P
Here's my tooltips markup and CSS:
<div class="tooltip">Click here to like it</div>
.tooltip {
position: absolute;
display: none;
background: url('images/tooltip.gif') no-repeat;
width: 100%;
height: 40px;
font-size: 0.8em;
line-height: 40px;
padding: 0px 0px 0px 8px;
}
Now, I have a div on my page called #button_container. I would like to place this .tooltip div 150px to the right of that div via JQuery. I understand I need to set this tooltips top and left attributes, but not sure how.
Idealy the tooltips top attribute should be the same as #button_container (although #button_container isn't positioned absolutely) and 150 less than #button_container's left attribute.
I don't really know where to get started on this so any help would be very much appreciated. Thanks.