[英]:hover:after css tooltip and white-space issue
the scenario is described here: 场景描述如下:
.mainbox{ width:150px; } .container{ overflow-x: auto; white-space: nowrap; } .position1{ display: inline-block; width: 50px; height: 50px; margin: 2px; padding: 2px; background-color: #B6DEFC; border: 1px solid; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-color: #A8A8A8; position: relative; font-size: xx-small; cursor: pointer; white-space: normal; } .position1:hover:after{ position: absolute; width: 100px; content: attr(data-title); border: 1px solid #FF0000; padding: 15px 5px 10px 5px; background: #FF9999; border-radius:5px; z-index: 1000; font-size: small; }
<div class="mainbox"> <div class="container"> <div class="position1" data-title="My data-title1"></div> <div class="position1" data-title="My data-title2"></div> <div class="position1" data-title="My data-title3"></div> <div class="position1" data-title="My data-title4"></div> </div> </div>
I'd like the tooltip (:hover:after) to show up out of the container and the mainbox . 我希望工具提示(:hover:after)出现在容器和mainbox的外面 。 I think it's a white-space issue... 我认为这是一个空白问题...
Can someone help me in solving this? 有人可以帮我解决这个问题吗?
thank you in advance... 先感谢您...
try 尝试
.position1:hover, .position1:after{
position: absolute;
width: 100px;
content: attr(data-title);
border: 1px solid #FF0000;
padding: 15px 5px 10px 5px;
background: #FF9999;
border-radius:5px;
z-index: 1000;
font-size: small;
} }
update: 更新:
You can try solution like this, remove position:relative
from .position1
, then apply this rule ( position:relative
) to .mainbox
, in this case the tooltips will be relative to the element which is outside of the element with rule overflow-x:hidden
and will be visible. 您可以尝试这样的解决方案,从.position1
删除position:relative
,然后将此规则( position:relative
)应用于.mainbox
,在这种情况下,工具提示将相对于元素,该元素位于规则overflow-x:hidden
,将可见。 I have update also the code, run it again 我也更新了代码,再次运行
there is no problem with white space, the container set as overflow:hidden
you can't show the tooltips out of the container 空白没有问题,容器设置为overflow:hidden
您无法从容器中显示工具提示
.mainbox{ width:150px; position:relative; } .container{ overflow-x: auto; white-space: nowrap; } .position1{ display: inline-block; width: 50px; height: 50px; margin: 2px; padding: 2px; background-color: #B6DEFC; border: 1px solid; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-color: #A8A8A8; /*position: relative;*/ font-size: xx-small; cursor: pointer; white-space: normal; } .position1:hover:after{ position: absolute; width: 100px; content: attr(data-title); border: 1px solid #FF0000; padding: 15px 5px 10px 5px; background: #FF9999; border-radius:5px; z-index: 1000; font-size: small; }
<div class="mainbox"> <div class="container"> <div class="position1" data-title="My data-title1"></div> <div class="position1" data-title="My data-title2"></div> <div class="position1" data-title="My data-title3"></div> <div class="position1" data-title="My data-title4"></div> </div> </div>
Now i understand what exactly you want after seeing the image. 现在,我了解了看到图像后想要的东西。
You just change position absolute to fixed in .position1:hover:after class and here is the updated fiddle. 您只需在.position1:hover:课后将绝对位置更改为固定位置,这是更新的小提琴。
.mainbox{
width:250px;
position:relative;
}
.container{
overflow-x: auto;
white-space: nowrap;
}
.position1{
display: inline-block;
width: 50px;
height: 50px;
margin: 2px;
padding: 2px;
background-color: #B6DEFC;
border: 1px solid;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-color: #A8A8A8;
position: relative;
font-size: xx-small;
cursor: pointer;
white-space: normal;
text-align: center;
}
.position1:hover:after{
content: attr(data-title);
position: fixed;
width: 100px;
border: 1px solid #FF0000;
padding: 15px 5px 10px 5px;
background: #FF9999;
border-radius:5px;
z-index: 1000;
font-size: small;
}
.number{
position:relative;
float:right;
padding:1px;
}
.name{
display:inline-block;
width: 45px;
height: 41px;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.date{
bottom: 0;
left: 1px;
right: 1px;
position:absolute;
}
Ok, sarhov... even I don't like the "effect" (I mean, look at box 3 and 4, and its tooltip: they show up very far from the box)... I can't "touch" the relative positioning in position1 class. 好的,sarhov ...甚至我都不喜欢“效果”(我的意思是,请看方框3和4,以及它的工具提示:它们显示在离方框很远的地方)...我无法“触摸” position1类中的相对位置。
the reason is the following...I compleate the code above with this... 原因如下...我用上面的代码完成了上面的代码...
I need to put labels in the boxes like these: 我需要将标签放在这样的框中:
<!-- HTML -->
<div class="mainbox">
<div class="container">
<div class="position1" data-title="My data-title1">
<span class="number">1</span>
<span class="name">Name 1</span>
<span class="date">2014/10/03</span>
</div>
<div class="position1" data-title="My data-title2">
<span class="number">2</span>
<span class="name">Name 2</span>
<span class="date">2014/10/03</span>
</div>
<div class="position1" data-title="My data-title3">
<span class="number">3</span>
<span class="name">Name 3</span>
<span class="date">2014/10/03</span>
</div>
<div class="position1" data-title="My data-title4">
<span class="number">4</span>
<span class="name">Name 4</span>
<span class="date">2014/10/03</span>
</div>
</div>
</div>
<!-- CSS -->
.mainbox{
width:150px;
position:relative;
}
.container{
overflow-x: auto;
white-space: nowrap;
}
.position1{
display: inline-block;
width: 50px;
height: 50px;
margin: 2px;
padding: 2px;
background-color: #B6DEFC;
border: 1px solid;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-color: #A8A8A8;
position: relative;
font-size: xx-small;
cursor: pointer;
white-space: normal;
text-align: center;
}
.position1:hover:after{
content: attr(data-title);
position: absolute;
width: 100px;
border: 1px solid #FF0000;
padding: 15px 5px 10px 5px;
background: #FF9999;
border-radius:5px;
z-index: 1000;
font-size: small;
}
.number{
position:relative;
float:right;
padding:1px;
}
.name{
display:inline-block;
width: 45px;
height: 41px;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.date{
bottom: 0;
left: 1px;
right: 1px;
position:absolute;
}
suggestions? 建议?
Ps: the code is generated server-side (it's a C#/.net WebApp) ps:代码是在服务器端生成的(这是C#/。net WebApp)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.