How to show span on hover and then not hide when not hovered?

Question

Here is an example jsfiddle which displays the span content when hovered over it. I want it not to hide when it is not hovered. It should hide when clicked somewhere outside.

http://jsfiddle.net/jn6re3aq/1/

#myChart {
  background-color: black;
}

#tooltip {
  display: none;
  position: relative;
  top: 8px;
  left: 10px;
  padding: 5px;
  margin: 10px;
  z-index: 100;
  background: #333;
  border: 1px solid #c0c0c0;
  opacity: 0.8;
  width: 300px;
  color: black;
  text-align: left;
}

#graphs:hover #tooltip {
  display: block;
}

#graphs {
  background-color: red;
}

<section id="graphs">
  <span id="tooltip">thisistest</span>
  <canvas id="myChart" width="550" height="350"></canvas>
</section>

In my opinion only possible to achieve with Javascript. CSS does not know a click(ed) function. — GreyRoofPigeon, Jan 06 '21 at 09:58
I tried using `:active` property but it is still getting hidden when not hovered. — Nehal Jaisalmeria, Jan 06 '21 at 09:59
@NehalJaisalmeria As far as I know, there isn't a pure CSS solution for this, but you should use JavaScript. — Grafit, Jan 06 '21 at 10:00
Please [search your title](https://www.google.com/search?q=css+stay+after+hover+site:stackoverflow.com) before asking — mplungjan, Jan 06 '21 at 10:04

score 0 · Answer 1 · answered Jan 06 '21 at 10:01

You can't do this with css, you have to use either javascript or jquery, simply on hover change the display to block.

Here is an example using jquery:

$("#graphs").hover(function(){
  $("#tooltip").css("display","block");
});

#myChart{
    background-color: black;
}
#tooltip {
    display: none;
    position: relative;
    padding: 5px; 
    margin: 10px;
    z-index: 100;
    background: #333;
    border: 1px solid #c0c0c0;
    opacity: 0.8; 
    width: 300px;
    color: black;
    text-align: left;
}

#graphs{
 background-color: red;   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="graphs">
    <span id="tooltip">thisistest</span>    
    <canvas id="myChart" width="550" height="350"></canvas>
</section>

https://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering — mplungjan, Jan 06 '21 at 10:03
@mplungjan try stopping at the text, it will give an unwanted behavior, hence until this time the best way of doing this is by JS/jQuery. — Mhd Alaa Alhaj, Jan 06 '21 at 10:06

How to show span on hover and then not hide when not hovered?

1 Answers1