Positioning Element Relative to its Friend Element

I Would like to create a effect the same as开发者_如何学Python Position Relative in css by using some jquery.

I have created a type of tooltip which I am trying to attach to different objects such as textboxes, checkboxes, some text etc.

so my code is along the lines of

<input id="adsfjlk" type="textbox" />
<div class="TooltipBalloon"> SOME TEXT</div>

Now of course CSS relative positioning is based on a elements parent. I cannot do that in this case as I cannot place a div inside of a input element.

Currently I use some Jquery to position the tooltip just to the right of the textbox.

The problem comes when something on the page changes. For example if you have a elastic textarea above your textbox. When this expands it pushes down your textbox and then the tooltip is no longer aligned correctly.

Because of the amount of different things that could happen I cannot really apply a OnChange type event to the elastic and instead need a better way to keep to elements positioned relative to each other.

I'm not sure how you are displaying tooltips (on focus, on hover), however I have created this example of how I may create tooltips for inputs.

http://jsfiddle.net/c4KyD/2/

I followed each input with a span tag containing the tooltip. I positioned the span to 'absolute'. The tooltip is displayed on focus and removed on blur.

If there is some dynamic content on the page the tooltips will still be positioned correctly (if you comment out the blur function and use the "Change Page" link to insert content you'll see this in action).

I also created code for hover events (commented out in my example).

Here are snippets of the code.

HTML...

<ul class="tooltip-stuff">
  <li>
    <label>First Name</label>
    <input class="tooltip" type="text" />
    <span>Enter your first name here.</span>
  </li>
</ul>

CSS...

.tooltip-stuff SPAN
{
    border: 1px solid #D3D3D3;
    margin-left: 5px;
    padding: 0 6px;
    background-color: #C4ECF8;
    position: absolute;
    display: none;
}

jQuery...

    $('.tooltip').focus(function () {
        $(this).next('span').fadeIn(100);
    });

    $('.tooltip').blur(function () {
        $(this).next('span').fadeOut(100);
    });

Get the relationship right in the HTML and everything will fall into place.

Here there is something missing - the two elements are associated, but there is nothing in the HTML to indicate this. The easiest way to do this is give them both a parent element. Once they are both grouped in a parent element you can position both relative to the parent element.

With a parent element:

• Your HTML will be easier to read and more meaningful,
• You can easily get the presentation you want.

EDIT: Or, the other way to get the relationship correct would be to use the title attribute of the input element for your tooltip content and use JS to read that and insert it into generated HTML (I'm sure there's jQuery plugins for this). This is would be my favoured way for short messages that do not need any formatting.