Adding icon next to fieldset legend title and displaying tooltip

Question

I'd like to add an icon to the right of the fieldset title. Something like this:

--Title[icon]-------
|                  |
| Content          |
|                  |
--------------------

When you hover over the icon a tooltip is supposed to be displayed. This is where I am having issues. For some reason the icon is being pushed below the title (see screen shot).

Not only that, but because of my CSS, the fieldset border is around my tooltip div. I want the fieldset border to remain the same and have the tooltip hover over the border.

I've tried playing around with the divs and CSS to get the desired effect, but nothing seems to work for me.

In summary, I'd like to have the icon appear to the right of the fieldset title and not have the fieldset border pushed around the tooltip. Rather, I want the tooltip to hover over the fieldset border.

UPDATE: If JS is the only way to accomplish this, then I'd like to paste the div content elsewhere on the page and relatively position the div to the right of the icon. In other words, no matter where the icon sits on the page, I want the div to always display to the right of it.

Live Example: http://jsfiddle.net/Akyym/3/

HTML:

<fieldset class="GridFacet" >

<legend>Title

    <div class="tooltipContainer">  
    <a class="tooltipIcon" href="">
        <img src="/Content/themes/images/info-small-black-13px.png"/>
    </a>

        <div class="tooltip">
            <strong>A</strong> - CONTENT<br/>
            <strong>B</strong>  - CONTENT<br/>
            <strong>C</strong>  - CONTENT<br/>
            <strong>D</strong>  - CONTENT<br/>
            <strong>E</strong>  - CONTENT<br/>
        </div>
    </div>   

</legend>

        <p class="chkRow">
            <input id="H10" type="checkbox" class="chkFacet" value="h10" />
            <label for="H10" class="lblFacet">
                A</label>
        </p>
        <p class="chkRow">
            <input id="T3" type="checkbox" class="chkFacet" value="t3" />
            <label for="T3" class="lblFacet">
                B</label>
        </p>
          <p class="chkRow">
            <input id="U1" type="checkbox" class="chkFacet" value="u1" />
            <label for="U1" class="lblFacet">
                C</label>
        </p>
          <p class="chkRow">
            <input id="U2" type="checkbox" class="chkFacet" value="u2" />
            <label for="U2" class="lblFacet">
                D</label>
        </p>
          <p class="chkRow">
            <input id="U3" type="checkbox" class="chkFacet" value="u3" />
            <label for="U3" class="lblFacet">
                E</label>
        </p>
</fieldset>

CSS:

.GridFacet {
    width: 50px;
}

.tooltipContainer {
    width: 325px;
    position: relative;
}

.tooltipIcon {
    text-decoration: none;
}

    a.tooltipIcon:hover + div {
        display:block;
        float: right;
    }

.tooltip {
    margin: -43px 0 5px 50px;
    *margin: -12px 0 5px 15px; /* For IE7 and below */
    padding: 10px 0 10px 10px;
    width: 250px;
    height: 110px;
    background-color: #e9ebec;
    position: absolute;
    border: 2px solid #739e40;
    display: none;
    font-size: 1.2em;
}

.tooltip:after, .tooltip:before {
    border: solid transparent;
    content:' ';
    height: 0;
    right: 100%;
    position: absolute;
    width: 0;
}

.tooltip:after {
    border-width: 11px;
    border-right-color: #e9ebec;
    top: 13px;
}

.tooltip:before {
    border-width: 14px;
    border-right-color: #739e40;
    top: 10px;
}

Answer 1

I'm guessing the main problem is the tooltipcontainer div within the legend technically only accepts "phrasing content" which does not include a div: MDN

But if you change your tooltipcontainer div to a span element it should work fine:

<legend>Title <span class="tooltipContainer">  
    <a class="tooltipIcon" href="">
        <img src="/Content/themes/images/info-small-black-13px.png"/>
    </a>
        <div class="tooltip">
            <strong>A</strong> - CONTENT<br/>
            <strong>B</strong>  - CONTENT<br/>
            <strong>C</strong>  - CONTENT<br/>
            <strong>D</strong>  - CONTENT<br/>
            <strong>E</strong>  - CONTENT<br/>
        </div>
    </span> 
</legend>

Here's a fiddle.