Question

我使用工具提示，并且希望在单击时显示工具提示消息，而不是悬停显示。

如何进行修改？

我的代码：

dob = new Date($("#DateOfBirth").val())

var dobYear = dob.getFullYear();
var now = new Date(Date.now()).getFullYear();
var age = now - dobYear;

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

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

Answer 1

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

Answer 2

$('.tooltip').click(function(){
  $('.tooltiptext').css('visibility') == 'visible'? $('.tooltiptext').css('visibility','hidden') : $('.tooltiptext').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 3

而不是在visibility: visible上制作hover，而是将其更改为focus上。

.tooltip:focus .tooltiptext {
    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;
}

.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;并还删除Class .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

您还可以使用引导程序弹出窗口（https://getbootstrap.com/docs/4.1/components/popovers/）。这也将为您提供所需的结果。

如何在非悬停点击时调用工具提示

5 个答案: