Скрыть всплывающую подсказку при зависании?

Question

Мы используем всплывающие подсказки, чтобы отображать названия цветов на панели выбора цвета.

Вы можете увидеть результат здесь: www.printnil.com

К сожалению, всплывающие подсказки не работает очень хорошо.

Проблема заключается в том, что курсор находится посредине выбора цвета, и вы перемещаете курсор до другого цвета, всплывающая подсказка не исчезает.

Нам нужно найти решение для скрытия всплывающих подсказок, если вы наведете новый цвет или всплывающую подсказку.

... Мы попытались переместить всплывающую подсказку вверх, чтобы получить небольшой промежуток между цветом и всплывающей подсказкой. Но если вы переместите мышь быстрее, вы поймаете эффект перехода.

Возможно, имеется JavaScript?

/** Color Swatches **/ 


.swatch { 
    float: left; 
    width: 100%; 
    margin: 0px 0px 10px 0px; 
} 

.swatch .header { 
    margin: 0.5em 0; 
} 

.swatch input { 
    display:none; 
} 

.swatch label { 
    width: 100%; 
    height: 40px; 
    float:left; 
    margin:0; 
} 

.swatch-element label { 
    cursor: pointer; 
} 

.swatch .swatch-element { 
    width: 20%; 
    height: 40px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;  
    box-sizing: border-box;   
    float:left; 
    -webkit-transform:translateZ(0); 
    -webkit-font-smoothing:antialiased; 
    position:relative; 
} 

.swatch input:checked + label { 
    text-align: center; 
    width: 100%; 
} 


.swatch input:checked + label:before { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    content: "\e607"; 
    line-height: 40px; 
    font-size: 15px; 
    color: #fff; 
    background: rgba(0,0,0,0.45); 
    padding: 6px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
} 

.swatch .tooltip { 
    font: normal 12px sans-serif; 
    text-align:center; 
    background: #27282b; 
    color:#fff; 
    bottom:100%; 
    padding: 10px; 
    display:block; 
    position:absolute; 
    width:140%; 
    left: -20%; 
    margin-bottom:15px; 
    filter:alpha(opacity=0); 
    -khtml-opacity: 0; 
    -moz-opacity: 0; 
    opacity:0; 
    visibility:hidden; 
    -webkit-transform: translateY(10px); 
    -moz-transform: translateY(10px); 
    -ms-transform: translateY(10px); 
    -o-transform: translateY(10px); 
    transform: translateY(10px); 
    -webkit-transition: all .25s ease-out; 
    -moz-transition: all .25s ease-out; 
    -ms-transition: all .25s ease-out; 
    -o-transition: all .25s ease-out; 
    transition: all .25s ease-out; 
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px;   
    z-index: 10000; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
} 

.swatch .tooltip:before { 
    bottom:-20px; 
    content:" "; 
    display:block; 
    height:20px; 
    left:0; 
    position:absolute; 
    width:100%; 
} 

.swatch .tooltip:after { 
    border-left:solid transparent 10px; 
    border-right:solid transparent 10px; 
    border-top:solid #27282b 10px; 
    bottom:-9px; 
    content:" "; 
    height:0; 
    left:50%; 
    margin-left:-13px; 
    position:absolute; 
    width:0; 
} 

.swatch .swatch-element:hover .tooltip { 
    filter:alpha(opacity=100); 
    -khtml-opacity:1; 
    -moz-opacity:1; 
    opacity:1; 
    visibility:visible; 
    -webkit-transform:translateY(0px); 
    -moz-transform:translateY(0px); 
    -ms-transform:translateY(0px); 
    -o-transform:translateY(0px); 
    transform:translateY(0px); 
} 


/** Color Swatches **/ 

Answer 1

Вы можете добавить pointer-events:none к вашему .swatch .tooltip.

.swatch .tooltip { ...; pointer-events : none }

Я надеюсь, что вы все в порядке с browser support

Для IE браузеров вы можете обойти отсутствие указателей событий с чем-то вроде этого:

.swatch .tooltip:hover{display : none}