允许元素的前后内容覆盖父级溢出限制 [英] Allow element's after and before content to override parent overflow restriction
问题描述
我有一个div，其overflow属性设置为scroll，以便查看所有包含的字段而不占用太多页面空间.每个字段都有一个跨度(该字段的标题)和关联的输入.我为用户提供了悬停在跨度上的可能性，并提供了一些有用的信息作为工具提示.我在跨度悬停时使用跨度after和before伪元素，以便添加自定义的工具提示.但是，工具提示的显示受父div溢出限制的限制.
I have a div whose overflow property is set to scroll in order to see all the contained fields without taking too much of the page's space. Each field has a span (the field's title) and input associated. I offer the possibility to the users to hover on the spans and see some useful information as a tool tip. I use the spans after and before pseudo-elements on the spans hover in order to add a customized tool tip. However, the tool tips display is restricted by the parent div overflow restriction.
这是呈现的HTML的示例:
Here is an example of the rendered HTML:
<div id="ContentPlaceHolder1_leftDiv" class="l-custom-left">
<div class="personalizedFields">
<table>
<tr>
<td>
<span title="Champ associé: Prenom" class="tooltip">Prénom</span>
</td>
</tr>
<tr>
<td>
<input name="ctl00$ContentPlaceHolder1$ucPF$ucCustomField36$field36" type="text" id="field36" />
</td>
</tr>
<tr>
<td>
<span title="Champ associé: Nom" class="tooltip">Nom</span>
</td>
</tr>
<tr>
<td>
<input name="ctl00$ContentPlaceHolder1$ucPF$ucCustomField37$field37" type="text" id="field37" />
</td>
</tr>
</table>
</div>
</div>
父div和跨度的CSS:
The css of the parent div and spans:
.l-custom-left
{
overflow-x: hidden;
width: 250px;
height: 50vh;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 10px;
position: absolute;
z-index: 98;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
如何允许内容前后的跨度覆盖" div父级溢出限制?
How can I allow my spans after and before content to "override" the div parent overflow restriction?
推荐答案
如果您确实希望此方法有效，则有两种方法.第一种是使用JavaScript(我不会介绍)将元素放置在容器外部元素的位置.这是一个令人讨厌的修复，在CSS3出现之前，我不得不实施了太多次，以致无法计数.
If you really want this to work, there are two ways. The first is to use JavaScript (which I won't go into) to place an element outside the container at the position of the element. It's an obnoxious fix, and I've had to implement it too many times to count prior to the advent of CSS3.
第二个更为优雅，但确实破坏了HTML的语义.您的:before和:after伪元素不会从滚动容器中弹出的原因是，它们被视为.tooltip元素的子元素，因此，即使它们是滚动容器的一部分文档，绝对定位.
The second is much more elegant, but does break semantics for HTML. The reason that your :before and :after pseudos won't pop out of a scrolling container is that they're treated like children of the .tooltip element, and thus part of the document flow for the scrolling container even if they're positioned absolutely.
那么我们该如何处理呢?我们作弊，简单明了.
So how do we handle this? We cheat, plain and simple.
在您的span之后添加第二个元素，如下所示:
Add a second element after your span like so:
<span class="tooltip">Prénom</span>
<span title="Champ associé: Prenom" class="tooltip-hovershim">Prénom</span>
我们保留相同的内容，以便元素具有相同的大小.
We keep the same content so that the element will be the same size.
然后，像这样更改您的CSS:
Then, alter your CSS like this:
.tooltip, .tooltip-hovershim
{
display: inline;
}
.tooltip:hover:after, .tooltip-hovershim:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 10px;
position: absolute;
z-index: 98;
}
.tooltip-hovershim {
position: absolute;
transform: translateX(-100%);
color: transparent;
}
.tooltip:hover:before, .tooltip-hovershim:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
瞧！ Vous avez votreélément飘浮剂.就这么简单.
Et voila! Vous avez votre élément flottant. It's that simple.
为简洁起见，仅适用于前两个元素.
只为小便而咯咯笑，这是Javascript变体
Just for shits and giggles, here's the Javascript variant
这是Javascript的关键部分:
And here's the crucial portion of Javascript:
var span_labels = document.querySelectorAll('.personalizedFields td span'),
label_house = document.createElement('div');
document.body.appendChild(label_house);
label_house.setAttribute('class', 'tooltip-hoverer');
for (var i=0,l=span_labels.length;i<l;i++){
var curr_label = span_labels[i];
curr_label.addEventListener('mouseover', function(e) {
e.preventDefault();
label_house.innerHTML = e.target.getAttribute('title');
var xy = getOffset(e.target);
label_house.style.top = (xy.top - 26) + 'px';
label_house.style.left = (xy.left) + 'px';
label_house.style.display = 'block';
});
curr_label.addEventListener('mouseout', function() {
label_house.style.display = 'none';
});
}
function getOffset(el) {
var elementRectangle = el.getBoundingClientRect();
var _x = elementRectangle.left;
var _y = elementRectangle.top + el.offsetParent.scrollTop;
return { top: _y, left: _x };
}
这篇关于允许元素的前后内容覆盖父级溢出限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
