javascript - 如何在单击而不是悬停时调用工具提示

Question

我使用工具提示，我想在点击时显示工具提示消息，而不是悬停时。

如何修改？

我的代码:

.tooltip {
  position: absolute;
  top: 7px;
  margin-left: 10px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 570px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

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

<input type="text" maxlength="8" />
<a href="#" class="tooltip">
  <img src="~/images/help-80.png" />
  <span class="tooltiptext">
     <img src="~/images/keyboard.png" /><br />
     "This is the absolute maximum size of your item. Don't worry about different configurations here."
    </span>
</a>

因此当您将鼠标悬停在图标上时您可以看到消息打开，但我希望点击和消息保持打开状态。

Answer 1

您可以检查样式属性并在单击图像时设置样式。

$('.tooltip').click(function(){
  var el = $('.tooltiptext');
  el.css('visibility') == 'visible' ? 
    el.css('visibility','hidden') : 
    el.css('visibility','visible');
});

.tooltip {
  position: absolute;
  top: 7px;
  margin-left: 10px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 570px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" maxlength="8" />
<a href="#" class="tooltip">
    <img src="~/images/help-80.png" />
    <span class="tooltiptext">
        <img src="~/images/keyboard.png" /><br />
        "This is the absolute maximum size of your item. Don't worry about different configurations here."
    </span>
</a>