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

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>

Answer 2

$(".tooltip").click(function(){
   $(".tooltiptext").toggle();
});

Answer 3

不要在hover上显示.tooltiptext，而是在focus上更改它。

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

但是，如果您从键盘focus图像，则它也将显示 嗡所以，如果你不想要这样，那么只有办法，即让jQuery 处理它。

.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:focus .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 4

更改 CSS 并删除visibility: hidden;并删除类 .tooltip:hover .toolt 。现在根据单击显示/隐藏工具提示。

$('.tooltiptext').hide();
$('.tooltip').click(function(e) {
  $('.tooltiptext').show();
});

.tooltip {
  position: absolute;
  top: 7px;
  margin-left: 10px;
}
.tooltip .tooltiptext {
  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>

Answer 5

您也可以使用bootstrap popover(https://getbootstrap.com/docs/4.1/components/popovers/(。这也将为您提供所需的相同结果。