Jquery UI tooltip() Method

Date Published: 08/05/2020Published By: JaiSchool

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()

OptionValue
showJquery UI effect names
hideJquery 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