CODEWITHSUNDEEP
javascript
user12077634
user12077634

Reputation:

How to add hover text in jQuery?

I have two buttons. When we click on first then second button activating and redirected to link, but the problem I am stuck on is I want to add fixed hover text on first button.

I also tried various codes like this:

$(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" />

Upvotes: 0

Views: 547

Answers (1)

PEPEGA
PEPEGA

Reputation: 2283

What you are looking for is called Tooltip, w3Schools have some greate examples on tooltips.

The JS part you seem to almost have figured out just edit the redirect to one of these:

Simulate a mouse click:

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

Simulate an HTTP redirect:

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>

Upvotes: 1

Related Questions