如何在光標不再徘徊時使工具提示保持可見

我有一個工具提示，我希望它在點擊時永久可見並在再次單擊時消失。現在我寫的代碼在你懸停和關閉圖像時工作的很好。如何在光標不再徘徊時使工具提示保持可見

任何人都可以請幫助使它保持可見點擊和不可見再次點擊。

這裏是我的代碼：

CSS

.tooltip { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
} 

.tooltip .tooltiptext { 
    visibility: hidden; 
    width: 285px; 
    background-color: black; 
    color: #fff; 
    text-align: left; 
    border-radius: 6px; 
    padding: 5px 10px; 
    position: absolute; 
    z-index: 1; 
    top: -23px; 
    right: 125%; 

    opacity: 0; 
    transition: opacity 1s; 
} 

.tooltip .tooltiptext::after { 
    content: ""; 
    position: absolute; 
    top: 20%; 
    left: 100%; 
    margin-top: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: transparent transparent transparent black; 
} 
.tooltip:hover .tooltiptext { 
    visibility: visible; 
    opacity: 1; 
}

HTML

<div id = "help"> 
     <div class="tooltip"> 
     <img type = help src="help.png" alt = "Support"> 
      <p class="tooltiptext"> 
       <b>Support: </b> <br /> 
      </p> 
     </div> 
    </div>

來源

2016-08-04 El Dj

除非你使用一個表單控件（如單選按鈕）作爲一個撥動記憶的開/關狀態（算有點哈克）有沒有辦法做到這只是在CSS中。你需要一個JS來設置'.tooltiptext'爲可見或隱藏。 – Moob

是的，我想我可能不得不使用JS來做到這一點！我不擅長JS tho：\ –

你需要一個JavaScript，你可以做內聯。下面的代碼每次點擊時切換.tooltip div上的屬性。

HTML：

<div id = "help" > 
    <div class="tooltip" onclick="event.currentTarget.setAttribute('data-active', event.currentTarget.getAttribute('data-active') != 'true')"> 
    <img type=help src="help.png"/> 
     <p class="tooltiptext"> 
      <b>Support: </b> <br /> 
     </p> 
    </div> 
</div>

然後改變你的CSS使用「數據活動」屬性而不是懸停僞類。這將使的ToolTipText可見，只有當.tooltip div有一個屬性：數據活動= 「真」

CSS

.tooltip[data-active='true'] .tooltiptext { 
     visibility: visible; 
     opacity: 1; 
}

這裏是工作提琴：https://jsfiddle.net/ofpnr514/

注：內聯在HTML中的javascript通常不是你想要做更復雜的事情。爲了最大限度地減少javascript，我在這裏做了內聯。作爲onclick =「...」屬性內嵌的javascript將作爲單獨的JS函數更好。

function toggleActive(event) { 
    event.currentTarget.setAttribute('data-active', 
      event.currentTarget.getAttribute('data-active') != 'true') 
}

然後，只需從你的HTML

onclick="toggleActive(event)"

來源

2016-08-04 16:00:31 mcgraphix

非常感謝！完全符合我的需要。 –

可以過渡屬性添加到您的CSS並設置其延遲時間..

過渡 - 特性：知名度; transition-delay：0.2s;

過渡屬性名稱，其中過渡將被推遲，這是屬性：可見性

過渡延遲說之前的屬性發生變化，在這裏它有多長0.2秒。

在您的情況下，您可以嘗試使其顯示很長一段時間。否則沒有辦法沒有使用Java腳本。

來源

2016-08-04 15:47:11 Archit

這是否會在點擊工作？ –

我真的沒有得到它..是這樣，你想改變過渡屬性onclick？如果是這樣，那麼你可以..通過這種方式，你會使用java腳本。 Java腳本有很多選項。 @El Dj – Archit

調用此方法使用一個小JS，你可以設置一個數據屬性，當元素被盤旋，並刪除它單擊時。EG：

(function(){ 
 
    var allTooltips = document.querySelectorAll(".tooltip"); 
 
    for (i = 0; i < allTooltips.length; ++i) {//for each .tooltip 
 
    var tt = allTooltips[i]; 
 
    tt.addEventListener("mouseover",function(){ 
 
     this.setAttribute("data-state","hover"); 
 
    }); 
 
    tt.addEventListener("click",function(){ 
 
     this.setAttribute("data-state",""); 
 
    }); 
 
    }  
 
})();

.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    border:1px solid red; 
 
} 
 
.tooltip:hover { 
 
    border-color:green; 
 
} 
 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 285px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: left; 
 
    border-radius: 6px; 
 
    padding: 5px 10px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    /*top: -23px; 
 
    right: 125%;*/ 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 
.tooltip .tooltiptext::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 20%; 
 
    left: 100%; 
 
    margin-top: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: transparent transparent transparent black; 
 
} 
 
.tooltip[data-state='hover'] .tooltiptext { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<div id="help"> 
 
    <div class="tooltip"> 
 
    <img src="help.png" alt="Support"> 
 
    <p class="tooltiptext"> 
 
     <b>Support: </b> 
 
     <br /> 
 
    </p> 
 
    </div> 
 
</div>

來源

2016-08-04 16:03:04 Moob

如何在光標不再徘徊時使工具提示保持可見

回答

相關問題