Tool-tip with scroll. Scroll is disappearing when mouse hover on arrows. - html

Question

Hi the tooltip in this sniped closes when trying to hover on the arrows of the scroll. With the mouse scroll it works fine but i need it to work with mousehover.
Got any suggestions?
Thank you in advance
.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>

Answer 1

based on my try-error research, I got a solution for webkit based on applying styles to "force" the browser to handle the scrollbar as another page element:
.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;
}
(More examples on how to style the scrollbar #CSS-Tricks.)
Also, here goes an extra help.
Change style .tooltip for this:
.tooltip {
transform: none;
padding: 10px;
}
The padding allows the element that triggers the tooltip to do not lose the :hover state when moving the mouse pointer from the element to the tooltip. Since the padding area is still considered part of the element.
Note for Stack Overflow community: please, feel free to provide extra information on how this works.