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.

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.

• javascript
• html
• css

• if you click on "hover me" you want to show tooltip? – Ilijanovic Commented Dec 30, 2019 at 7:47
• yes @Ifaruki how will I do that – Pranjal Deb Commented Dec 30, 2019 at 7:55

5 Answers 5

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>

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';
}

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");
}

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>

<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;
}