带滚动的工具提示。当鼠标悬停在箭头上时，滚动消失。

嗨尝试将鼠标悬停在滚动箭头上时，此sniped中的工具提示会关闭。用鼠标滚动它工作正常，但我需要它与mousehover一起工作。有什么建议吗？带滚动的工具提示。当鼠标悬停在箭头上时，滚动消失。

预先感谢您

.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: 100px; 
 
    display: block; 
 
}

<div class="tooltip tooltip-scroll">Hover over me for scrollbar 
 
    <div class="wrapper"> 
 
    <span class="tooltip-text">Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>abc<br/>def<br/><br/>def<br/><br/>def<br/><br/>def<br/>ghi<br/>jkl<br/></span> 
 
    </div> 
 
</div>

来源

2017-02-19 StevenC

在Firefox中适合我。你使用哪种操作系统/浏览器？ – SpyderScript

嗨，即时通讯使用铬，这个错误只发生在铬 – StevenC

根据我试错研究，我得到了基于应用的风格，以“力”的浏览器来处理滚动条为webkit的解决方案另一个页面元素：

.tooltip.tooltip-scroll ::-webkit-scrollbar { 
 
    background-color: #F1F1F1; 
 
} 
 

 
.tooltip.tooltip-scroll ::-webkit-scrollbar-thumb { 
 
    background-color: #C1C1C1; 
 
    border: 1px solid #F1F1F1; 
 
} 
 

 
/* optional */ 
 
.tooltip.tooltip-scroll ::-webkit-scrollbar-button { 
 
    background-color: #F1F1F1; 
 
}

（关于如何风格滚动条@CSS-Tricks更多的例子。）

而且，在这里不用额外的帮助。选择风格.tooltip此：

.tooltip { 
 
    transform: none; 
 
    padding: 10px; 
 
}

的填充允许触发提示，以不输元素：从元件移动鼠标指针悬停时状态到工具提示。由于填充区域仍被视为元素的一部分。

堆栈溢出社区的注意事项：请随时提供有关如何工作的额外信息。

来源

2017-03-07 16:42:20

带滚动的工具提示。当鼠标悬停在箭头上时，滚动消失。

回答

相关问题