我想在fieldset标题的右侧添加一个图标。像这样:
--Title[icon]-------
| |
| Content |
| |
--------------------
当您将鼠标悬停在图标上时,应显示工具提示。这是我遇到问题的地方。由于某种原因,图标被推到标题下方(参见屏幕截图)。
不仅如此,由于我的CSS,fieldset边框位于我的工具提示div周围。我希望fieldset边框保持不变,并将工具提示悬停在边框上。
我尝试过使用div和CSS来获得理想的效果,但似乎没有什么对我有用。
总之,我希望图标显示在字段集标题的右侧,而不是在工具提示周围按下字段集边框。相反,我希望工具提示悬停在字段集边框上。
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;
}
答案 0 :(得分:3)
我猜主要问题是tooltipcontainer
div
在legend
内技术上只接受“短语内容”,其中不包含div
:{{3 }}
但如果您将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>