Click to show CSS tooltip

Question

I am new to working with CSS and HTML I have been trying to create a tool tip using CSS and HTML so Far has been successful. But now want to know if possible how to make this tooltip only Appear when clicked on. And disappear when clicked again. Below is the HTML code i have used. If someone could suggest some CSS that enables me to create the desired outcome that would be brilliant

HTML

class='tooltips' style ='color:#585858; text decoration:none;'> desktop NG information

Thanks in advance

Answer 1

To toggle a tooltip you can use the :checked pseudo class of a checkbox.

.tooltip {
  position: relative;
  border-bottom: 1px dotted black;
}
.tooltip span {
  visibility: hidden;
  width: 10em;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 9;
  top: -1em;
  left:  100%;
  margin-left:1em;
  opacity: 0;
  transition: opacity 1s;
}
.tooltip span::after {
  content: "";
  position: absolute;
  top: 1.5em;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip input {
  display:none;
}
.tooltip input:checked+span {
  visibility: visible;
  opacity: 1;
}

<p>Hello <label class="tooltip">world<input type="checkbox"><span>and this is the tooltip text displayed on click.</span></label>! I am greeting you.<p>

Answer 2

HTML Code

<a href="#" title="Sample tooltip" class="tooltip">Link</a>

CSS Code

.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}

.tooltip:hover:after{
   background:#111;
   background:rgba(0,0,0,.8);
   border-radius:5px;
   bottom:18px;
   color:#fff;
   content:attr(title);
   display:block;
   left:50%;
   padding:5px 15px;
   position:absolute;
   white-space:nowrap;
   z-index:98
  }
.tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:12px;
    content:"";
    display:block;
    left:75%;
    position:absolute;
    z-index:99
   }

Try this will work properly and onlcik event doesn't support in css.