如何使用 JavaScript 在单击事件上显示工具提示

Question

如何通过单击带有 JavaScript 的按钮来显示工具提示？

这是我的代码：

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

悬停时显示工具提示。但是我想在仅使用 JavaScript 的点击事件上显示工具提示，我将如何做到这一点。请帮帮我。

Answer 1

我使用 ES5 做了一个切换。我不确定你是否使用了转译器。我对你的 CSS 做了一些调整。

根据您的实现，应该将其重构为使用事件委托。

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>

Answer 2

尝试以下设置：

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

Answer 3

我猜你想要这样的东西。当您单击“悬停我”时，它会显示您的工具提示，您可以使用 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");
}

Answer 4

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

尝试使用焦点

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

Answer 5

实现此目的的另一种简单方法是使用事件侦听器将显示样式从 none 更改为 block，反之亦然。

要使其正常工作，重要的是将样式属性添加到工具提示元素，如下所示：<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>