Apply tooltipClass .
Refer below code. For position add
position: { my: "left+15 center", at: "right center" }
HTML
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script>
$(document).ready(function () {
var hasToolTip = false;
$('.txtvadi').on({
"click": function () {
hasToolTip = true;
$(this).tooltip({
tooltipClass: "tooltipClass",
items: $(this),
content: "Displaying on click",
position: { my: "right top+20", at: "right center" }
});
$(this).tooltip("open");
},
"mouseout": function () {
if (hasToolTip) {
$(this).tooltip("disable");
hasToolTip = false;
}
}
});
});
</script>
<style type="text/css">
.txtvadi2 {
float: left;
width: 140px;
height: 36px;
border: 1px solid #736b33;
background-color: #000;
color: #fff;
font-size: 19px;
font-family: behtop_Yekan;
text-align: center;
}
.txtvadi1 {
float: left;
width: 140px;
height: 36px;
border: 1px solid #736b33;
background-color: #000;
color: #fff;
font-size: 19px;
font-family: behtop_Yekan;
text-align: center;
}
.tooltipClass {
border-bottom: 1px dotted black !important;
font-size: 30px !important;
font-family: Vivaldi !important;
color: green !important;
}
</style>
<center>
<input name="TxtPrice1" type="text" id="TxtPrice1" class="form-control txtvadi1 txtvadi" placeholder="TxtPrice1" required="required" />
<input name="TxtPrice2" type="text" id="TxtPrice2" class="form-control txtvadi2 txtvadi" placeholder="TxtPrice2" required="required" />
</center>
</body>
</html>
Demo
For more options refer beloew link.
https://api.jqueryui.com/tooltip/
