How to show tooltip On click event Using JavaScript

Question

How can I show a tooltip by clicking on a button with JavaScript ?

Here is my code:

HTML

<div class="tooltip">Hover over me
<div class="tooltiptext">
<button>click me</button>
  <span >Tooltip text
  
  </span>
  </div>
</div>

CSS

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

The tooltip is showing while doing hover. But I want to show tooltip while using on click event using only JavaScript how will I do that. Please help me.

if you click on "hover me" you want to show tooltip? – bill.gates Dec 30 '19 at 07:47 — bill.gates, Dec 30 '19 at 07:47
yes @Ifaruki how will I do that – Pranjal Deb Dec 30 '19 at 07:55 — Pranjal Deb, Dec 30 '19 at 07:55

score 4 · Answer 1 · answered Dec 30 '19 at 07:56

I whipped up a toggle using ES5. I wasn't sure if you were using a transpiler. I made a couple of tweaks to your CSS.

Depending on your implementation, this should be refactored to use event delegation.

var tooltip = document.querySelector('.tooltip')

tooltip.addEventListener('click', function() {
  if (this.classList.contains('active')) {
    this.classList.remove('active');
  } else {
    this.classList.add('active');
  }
  
});

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip.active .tooltiptext {
  visibility: visible;
}

<div class="tooltip">Hover over me
<div class="tooltiptext">
<button>click me</button>
  <span >Tooltip text

  </span>
  </div>
</div>

score 3 · Answer 2 · answered Dec 30 '19 at 08:05

Try the following setup:

html

<button id="button1">click me</button>
<div class="tooltiptext">
 <span >Tooltip text</span>
</div>

css

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

js

var button1 = document.querySelectorAll('#button1');
button1.onclick = buttonClicked;
function buttonClicked(){
  var tooltip = document.querySelectorAll('.tooltiptext');
  tooltip.style.visibility = 'visible';
}

@PranjalDeb Kindly refer this [documentation](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) — Shri Arun, Dec 30 '19 at 10:19

score 1 · Answer 3 · answered Dec 30 '19 at 07:55

I guess you want something like this. When you click on "hover me" it shows your tooltip and you can close it with X

<div onmousedown="show()" class="tooltip">
  Hover over me
  <div id="tooltip" onmouseup="hide()" class="tooltiptext">
    <span>Tooltip text </span><span class="close">X</span>
  </div>
</div>

CSS:

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip:hover {
   cursor: pointer;
}
.close {
  color: red;
}
.close:hover {
  cursor: pointer;
}
.tooltip .tooltiptext {
  display: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.block {
  display: block !important;
}

JavaScript:

 function hide() {
  document.getElementById("tooltip").classList.remove("block");
}
function show() {
  document.getElementById("tooltip").classList.add("block");
}

score 1 · Answer 4 · answered Jan 13 '22 at 14:34

Another simple way of achieving this is by using the event listener to change the display style from none to block and vice versa.

For it to work properly is important to add the style attribute to the tooltip element like so: <tooltip id='tooltip' style='display:none'>

const btn = document.getElementById('btn'),
      tooltip = document.getElementById('tooltip');

btn.addEventListener('click', () => {
  if (tooltip.style.display === "none") {
      tooltip.style.display = "block";
  }
  else{
    tooltip.style.display  = "none";
  }
})

#tooltip {
  position: absolute;
  margin-top:5px;
  width: 80px;
  background-color: rgb(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
}

<div style='position:relative'>
  <button id='btn' style='cursor:pointer'>Try me</button>
  <tooltip id='tooltip' style='display:none'>
    Some text here
  </tooltip>
<div>

score 0 · Answer 5 · answered Dec 30 '19 at 07:59

<div class="tooltip">
<a href="javascript:void(0)">Hover over me</a>
<div class="tooltiptext">
<button>click me</button>
  <span >Tooltip text

  </span>
  </div>
</div>

Try using focus

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
.tooltip a{ color: inherit; text-decoration: none; }
.tooltip a:focus+.tooltiptext {
  visibility: visible;
}

How to show tooltip On click event Using JavaScript

5 Answers5

Linked