You can achieve this using open
and close
methods in jQuery UI Tooltip.
I have modified your code for better readability :
HTML
<section>
<label id="tt1" class="tooltip" for="vehiclePrice" title="">Vehicle Price</label>
<input type="text" id="vehiclePrice" placeholder="$25592 Suggested MSRP" onkeypress="return isNumberKey(event)" required />
</section>
<br><br><br><br><br><br>
<label id="tt2" class="tooltip" title="APR">Annual Percentage Rate (APR)</label>
JavaScript
$(function () {
$(".tooltip").tooltip({
track: true,
position: {
my: "center bottom-20",
at: "center top",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
$( "#tt1" ).tooltip( "option", "content", "vehicle price" );
$("#tt1").tooltip("open");
$("#tt1").tooltip().off("mouseleave mouseover");
$( "#tt1" ).on( "tooltipclose", function( event, ui ) {
$("#tt1").tooltip("open");
} );
$("#vehiclePrice").focus(function () {
$("#tt1").tooltip("close");
});
});
See in JSFiddle.