如何創建保持在純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的鼠標懸停的工具提示？

回答

相關問題