純粋なCSSでマウスオーバーしたままのツールチップを作成するには？

Question

ここにツールチップコードがあります。そしてこのボタンをクリックするとこのツールチップにマウスを移動すると消えます。それを作る方法？私はどのようにわからない。

残念ながらホバー上の永久的な状態を追加

a.tooltips { 
 
    position: relative; 
 
} 
 
a.tooltips span { 
 
    position: absolute; 
 
    width: 140px; 
 
    color: #FFFFFF; 
 
    background: #000000; 
 
    min-height: 50px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    visibility: hidden; 
 
    border-radius: 6px; 
 
} 
 
a.tooltips span:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -8px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 8px solid #000000; 
 
    border-right: 8px solid transparent; 
 
    border-left: 8px solid transparent; 
 
} 
 
a:hover.tooltips span { 
 
    visibility: visible; 
 
    opacity: 0.8; 
 
    bottom: 30px; 
 
    left: 50%; 
 
    margin-left: -76px; 
 
    z-index: 999; 
 
}

<a class="tooltips" href="#">CSS Tooltips 
 
        <span>Tooltip <button >Open dialog</button></span></a>

Answer 1

は、純粋なCSSで実現することができない、あなたはjQueryの小さなビットまたはJavaScriptを追加する必要があります。次のようなものがあります。

$('a.tooltips span').on('mouseover',function(){ 
    $(this).css({ 
     "visibility": "visible", 
     "opacity": "0.8" 
     // more styles go here 
    }); 
}); 

Answer 2

純粋なJavaScriptを使用した例です。これは単なる例ですが、必要に応じて多くの変更を加えることができます。コメントに記載されているように、純粋なCSSで、ホバー状態の遷移遅延を不条理に追加することでそれを行うことができますが、JSソリューションを使用すると、追加の機能を追加したい場合に多くの柔軟性が得られます。

var tooltips = document.querySelectorAll('.tooltip-group'); 
 
var closeTooltips = document.querySelectorAll('[data-tooltip-close]'); 
 
    
 
for (var i = 0; i < tooltips.length; i++) { 
 
    tooltips[i].addEventListener('mouseover', function(evt) { 
 

 
    // Open tooltip when the user interacts with the 
 
    // element. We will just open the tooltip as 
 
    // an example 
 
    document.querySelector('[data-tooltip-id="' + evt.currentTarget.id + '"]').style.display = 'block'; 
 

 
    }); 
 
} 
 

 
for (var i = 0; i < closeTooltips.length; i++) { 
 
    closeTooltips[i].addEventListener('click', function(evt) { 
 

 
    // Event for button within tooltip, this could be 
 
    // replaced for anything such as opening a modal 
 
    // or changing another element 
 
    document.querySelector('[data-tooltip-id="' + evt.currentTarget.dataset.tooltipClose + '"]').style.display = 'none'; 
 

 
    }); 
 
}

body, html{ 
 
    width: 100%; 
 
    height: 100%; 
 
    font-family: 'Arial', sans-serif; 
 
} 
 

 
.f__container { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.tooltip-group { 
 
    position: relative; 
 
    margin: 0 auto; 
 
} 
 

 
[data-tooltip-id]{ 
 
    width: 100%; 
 
    position: absolute; 
 
    display: none; 
 
    background: black; 
 
    color: white; 
 
    top: -60px; 
 
    margin-left: -15px; 
 
    border-radius: 5px; 
 
    padding: 15px; 
 
}

<div class="f__container"> 
 
    <div id="content"> 
 
    <div id="js-tooltip" class="tooltip-group"> 
 
     JS Tooltip, hover over me :D! 
 
     <div data-tooltip-id="js-tooltip"> 
 
     Tooltip! 
 
     <button data-tooltip-close="js-tooltip">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>