CODEWITHSUNDEEP
htmlcss
El Dj
El Dj

Reputation: 385

How to make tooltip stay visible after cursor is no longer hovering it

I have a tooltip that I want it to be permanently visible if clicked on it and disappear when clicked again. Right now the code I wrote is working fine when you hover on and off the image.

Can anyone please help on making it stay visible on click and invisible on click again.

Here's my 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>

Upvotes: 1

Views: 4214

Answers (3)

Moob
Moob

Reputation: 16204

Using a little JS you can set a data-attribute when the element is hovered and remove it when its clicked. 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>

Upvotes: 0

mcgraphix
mcgraphix

Reputation: 2733

You would need a little javascript which you could do inline. The code below, toggles an attribute on the .tooltip div every time it is clicked.

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>

Then change your CSS to use the 'data-active' attribute instead of the hover pseudo-class. This will make the tooltiptext visible only when the .tooltip div has an attribute: data-active="true"

CSS

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

Here is a working fiddle: https://jsfiddle.net/ofpnr514/

NOTE: Inlining the javascript right in the HTML is generally not how you would want to do anything more complex. I did it inline here just to minimize the javascript. The javascript that is inline as the onclick="..." attribute, would be better as a separate JS function.

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

Then just call this method from your HTML

onclick="toggleActive(event)"

Upvotes: 2

Archit
Archit

Reputation: 139

You can add the transition property to your CSS and set its delay time..

transition-property:visibility; transition-delay:0.2s;

transition-property names the property where the transition will be delayed,here it is: visibility

transition-delay says how long before the property changes, here it is 0.2 seconds.

In your context, you can try making it appear for long time. Otherwise there no way without using Java script.

Upvotes: 0

Related Questions