Добавление значка рядом с заголовком легенды и отображением подсказки

Question

Я хочу добавить значок справа от названия поля. Что-то вроде этого:

Когда вы наводите курсор на значок, должна отображаться всплывающая подсказка. Вот где у меня проблемы. По какой-то причине значок подбрасывается под заголовком (см. Снимок экрана).

Не только это, но из-за моей CSS, то FIELDSET граница вокруг моей подсказке дел. Я хочу, чтобы граница fieldset оставалась прежней, и подсказка всплывала над границей.

Я пробовал играть с div и CSS, чтобы получить желаемый эффект, но ничего не работает для меня.

Таким образом, я хотел бы, чтобы значок отображался справа от названия поля и не располагал границую строку вокруг всплывающей подсказки. Скорее, я хочу, чтобы всплывающая подсказка зависала над границей fieldset.

UPDATE: Если JS - единственный способ выполнить это, то я хотел бы вставить содержимое div в другом месте страницы и относительно расположить div справа от значка. Другими словами, независимо от того, где значок находится на странице, я хочу, чтобы div всегда отображался справа от него.

Живой пример: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

Я предполагаю, что главной проблемой является tooltipcontainerdiv в пределах legend технически принимает только «содержание фразировки», который не включает в себя div: MDN

Но если вы измените ваш tooltipcontainerdiv к span элемента, он должен работать нормально:

<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.