3

我想在字段集标题的右侧添加一个图标。像这样的东西：

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

当您将鼠标悬停在图标上时，应该会显示一个工具提示。这是我遇到问题的地方。由于某种原因，该图标被推到标题下方（参见屏幕截图）。

在此处输入图像描述

不仅如此，由于我的 CSS，字段集边框围绕着我的工具提示 div。我希望字段集边框保持不变并将工具提示悬停在边框上。

我尝试过使用 div 和 CSS 来获得所需的效果，但似乎没有什么对我有用。

总之，我想让图标出现在字段集标题的右侧，而不是将字段集边框推到工具提示周围。相反，我希望工具提示悬停在字段集边框上。

更新：如果 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;
}
4

1 回答 1

3

我猜主要问题是tooltipcontainer div在legend技术上只接受不包括的“短语内容” div：MDN

但是，如果您将您的更改tooltipcontainer div为一个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>

这是一个小提琴。

于 2013-10-07T18:22:01.587 回答