When an HTML element has a title attribute and you hover mouse on it then you see a tooltip in which value of the title attribute shows.
Jquery UI gives us a method tooltip() to give it a better look. You can select an element in jquery and apply the tooltip() method. That's all.
Official documentation:- https://api.jqueryui.com/tooltip/
Example (Code):
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI tooltip()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<h1 title="Welcome To JaiSchool.com | Learn Programming Languages" id="title">Jaischool.com</h1>
<script>
$(document).ready(function(){
$("#title").tooltip();
});
</script>
</body>
</html>
Options of Jquery UI's tooltip()
| Option | Value |
|---|---|
| show | Jquery UI effect names |
| hide | Jquery UI effect names |
show Option
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI tooltip()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<h1 title="Welcome To JaiSchool.com | Learn Programming Languages" id="title">Jaischool.com</h1>
<script>
$(document).ready(function(){
$("#title").tooltip({
show:{
effect:"bounce",
},
});
});
</script>
</body>
</html>hide Option
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI tooltip()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<h1 title="Welcome To JaiSchool.com | Learn Programming Languages" id="title">Jaischool.com</h1>
<script>
$(document).ready(function(){
$("#title").tooltip({
hide:{
effect:"slideUp",
duration:1000
},
});
});
</script>
</body>
</html>| You may also like these related posts |
|---|
| || button() widget in jquery UI |
| || checkboxboxradio() widget in Jquery UI |
| || tabs() widget in Jquery UI |
| || datepicker() widget in Jquery UI |
Publish A Comment