如何创建停留在纯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

这最近发生了变化，现在可以使用纯CSS完成：

jsFiddle示例

 .tooltip {
  display: none;
  position: absolute;
  height: 45px;
  background-color: #FCF;
  overflow: hidden;
}

.hasTooltip:hover .tooltip,
.tooltip:hover {
  display: block;
}

Answer 3

这是一个使用纯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>