带有伪元素的可滚动/可悬停 CSS 工具提示

Question

我有一个仅可悬停的 CSS 工具提示，在大多数情况下效果很好，但我想在它超过最大高度时添加一个滚动条。如果我添加 max-height: 50px; overflow-y: auto，我的伪元素 :before 和 :after 将由于 overflow 属性.

而消失

参见：http://jsfiddle.net/accelerate/24xwru1n/

有没有办法在保持我的伪元素的同时向我的工具提示添加滚动条？或者我是否必须在没有伪元素的情况下才能让它工作？

Answer 1

恐怕你必须在悬停时添加一个包装器并应用 css，如 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 工具提示

Scrollable / hoverable CSS tooltip with psuedo elements

css

tooltip

scrollbar

pseudo-element