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.