javascript - 如何在 jQuery 中添加悬停文本？

Question

我有两个按钮。当我们单击第一个然后第二个按钮时，激活并重定向到链接，但我遇到的问题是我想在第一个按钮上添加固定的悬停文本。

我也尝试过这样的各种代码:

$(function() {
  $("#bt1").click(function() {
    $(this).attr("disabled", "disabled");
    $("#bt2").removeAttr("disabled");
  });
  $('#bt2').on('click', function() {
    $('<a href="https://www.google.com" target="blank"></a>')[0].click();
  })
  $("#bt2").click(function() {
    $(this).attr("disabled", "disabled");
    $("#bt2").removeAttr("disabled");
  });
});
$(function() {
  $("#div2").text('$5.7');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input class="storebutton" type="submit" name="submit" value="Add to Cart" id="bt1" />
<input class="storebutton1" type="button" name="button" value=" Buy  Now " id="bt2" disabled="disabled" />

Answer 1

您正在寻找的内容称为“工具提示”，w3Schools 在 tooltips 上有一些很棒的示例.

您似乎几乎已经弄清楚了 JS 部分，只需将重定向编辑为其中之一即可:

模拟鼠标点击:

window.location.href = "https://stackoverflow.com";

模拟 HTTP 重定向:

window.location.replace("https://stackoverflow.com");

//add to cart button click
$(".addCart").click(function() {
  //enable the second button
  $(".buy").prop('disabled', false);
});

$(".buy").click(function() {
  //redirect to another page if second button is clicked
  window.location.replace("https://stackoverflow.com");
});

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  margin: 32px 0 0 20px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tooltip">
  <button class="addCart">Add to cart</button>
  <span class="tooltiptext">I'm a Tooltip!</span>
</div>

<button class="buy" href="http://newsite.test" disabled>Buy now</button>