Инструмент с свитком. Прокрутка исчезает при наведении курсора мыши на стрелки.

Question

Привет, всплывающая подсказка в этом снайпере закрывается при попытке навести указатель на стрелки свитка. С прокруткой мыши он отлично работает, но мне нужно, чтобы он работал с 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>

Answer 1

на основе моих исследований примерки ошибок, я получил решение для 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; 
 
}

Обивка позволяет элемент, который вызывает всплывающую подсказку, чтобы не теряйте : парить состояния при перемещении указателя мыши от элемента к всплывающей подсказке. Так как область заполнения по-прежнему считается частью элемента.

Примечание для сообщества переполнения стека: пожалуйста, не стесняйтесь предоставить дополнительную информацию о том, как это работает.