可滚动/悬停的CSS工具提示与伪元素 [英] Scrollable / hoverable CSS tooltip with psuedo elements
问题描述
我有一个悬停的CSS只有工具提示在大多数情况下工作正常,但我想添加一个滚动条,当它超过一个最大高度。如果我添加 max-height:50px; overflow-y:auto
,我的伪元素:之前
和:之后
到 overflow
属性。
I have a hoverable CSS-only tooltip that works well in most instances, but I want to add a scrollbar when it exceeds a max-height. If I add max-height: 50px; overflow-y: auto
, my pseudo elements :before
and :after
will disappear due to the overflow
property.
请参阅: http://jsfiddle.net/accelerate/24xwru1n/
有一种方法可以将滚动条添加到我的工具提示,同时保持我的伪元素?
Is there a way to add a scrollbar to my tooltip while maintaining my pseudo elements? Or will I have to live without my pseudo elements to make it work?
推荐答案
我恐怕你必须添加一个包装器当你想要滚动滚动并应用于css如 tooltip-text
:
I'm afraid you have to add a wrapper when you want a scroll in hover and apply to this the css as in tooltip-text
:
HTML
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
.wrapper{
position:relative;
}
.tooltip {
transform: none;
margin: 50px;
}
.tooltip:hover > .tooltip-text, .tooltip:hover > .wrapper {
pointer-events: auto;
opacity: 1.0;
}
.tooltip > .tooltip-text, .tooltip >.wrapper {
display: block;
position: absolute;
z-index: 6000;
overflow: visible;
padding: 5px 8px;
margin-top: 10px;
line-height: 16px;
border-radius: 4px;
text-align: left;
color: #fff;
background: #000;
pointer-events: none;
opacity: 0.0;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* Arrow */
.tooltip > .tooltip-text:before, .tooltip > .wrapper:before {
display: inline;
top: -5px;
content: "";
position: absolute;
border: solid;
border-color: rgba(0, 0, 0, 1) transparent;
border-width: 0 .5em .5em .5em;
z-index: 6000;
left: 20px;
}
/* Invisible area so you can hover over tooltip */
.tooltip > .tooltip-text:after, .tooltip > .wrapper:after {
top: -20px;
content: " ";
display: block;
height: 20px;
position: absolute;
width: 60px;
left: 20px;
}
.wrapper > .tooltip-text {
overflow-y: auto;
max-height: 40px;
display: block;
}
<div class="tooltip">Hover over me for no scrollbar<span class="tooltip-text">Hello there<p/>abc<br/>def<br/>ghi<br/>jkl<br/></span></div>
<p/><p/><p/>
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
这篇关于可滚动/悬停的CSS工具提示与伪元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!