如何创建保持在纯CSS的鼠标悬停的工具提示？

我在这里有一个工具提示代码。当我在这个工具提示上移动鼠标点击按钮时，它会消失。如何让它留下来？我不知道如何。如何创建保持在纯CSS的鼠标悬停的工具提示？

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>

来源

2017-02-11 Tomasz Cysewski

对我的作品？ https://jsfiddle.net/bLzm8L86/ – Aer0

@ Aer0他希望工具提示在他盘旋之后留下，这不是没有Javascript的完全可能。你可以添加一个转换延迟，但这很难。唯一的方法是使用JavaScript。 – Win

@Win转换延迟或很长的转换只是过渡留一些额外的JavaScript，不hacky，只是不寻常的价值总是罚款这个目的;） –

不幸的是添加上悬停恒定的状态，不能用纯CSS来完成，你必须添加的jQuery的一个小一点或JavaScript。类似于：

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

来源

2017-02-11 19:53:31

下面是使用纯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>

来源

2017-02-11 20:20:11 Win

如何创建保持在纯CSS的鼠标悬停的工具提示？

回答

相关问题