Wie Tooltip bleiben sichtbar, nachdem der Cursor nicht mehr schwebt

Question

Ich habe eine QuickInfo, die ich möchte dauerhaft angezeigt werden, wenn Sie darauf klicken und verschwinden, wenn Sie erneut klicken. Im Moment funktioniert der Code, den ich geschrieben habe, gut, wenn Sie das Bild ein- und ausblenden.

Kann jemand bitte helfen, damit es auf Klick sichtbar bleibt und bei Klick wieder unsichtbar.

Hier ist mein Code:

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> 

Answer 1

Sie würden ein wenig Javascript benötigen, das Sie inline tun könnten. Der folgende Code schaltet bei jedem Klick ein Attribut im .tooltip-div ein.

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> 

Dann CSS ändern die 'Daten aktiv' zu verwenden, anstatt der Hover-Pseudo-Klasse-Attribut. Dies wird die ToolTipText nur sichtbar machen, wenn die .tooltip div ein Attribut hat: Daten-aktiv = "true"

CSS

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

Hier ist eine Arbeits Geige: https://jsfiddle.net/ofpnr514/

HINWEIS: Inlining der JavaScript im HTML ist in der Regel nicht so, wie Sie etwas komplexer machen möchten. Ich habe es hier inline gemacht, nur um das Javascript zu minimieren. Das Javascript, das inline als onclick = "..." Attribut ist, wäre besser als separate JS Funktion.

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

Dann rufen Sie einfach diese Methode von Ihrem HTML

onclick="toggleActive(event)" 

Answer 2

Sie können den Übergang Eigenschaft zu Ihrem CSS hinzufügen und seine Verzögerungszeit ..

Übergang -property: Sichtbarkeit; Übergangsverzögerung: 0,2s;

Übergangseigenschaftsnamen der Eigenschaft, wo der Übergang verzögert, hier ist sie: Sichtbarkeit

Übergang Verzögerung sagen, wie lange vor der Eigenschaftsänderung, hier 0,2 Sekunden sind.

In Ihrem Kontext können Sie versuchen, es für lange Zeit erscheinen zu lassen. Sonst gibt es keinen Weg ohne Java Script zu benutzen.

Answer 3

ein wenig JS Verwenden Sie ein Daten-Attribut festlegen, wenn das Element schweben ist, und entfernen Sie es, wenn seine geklickt.Beispiel:

(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>