Please follow below steps:-
1)Open your editor such as visual studio/notepad.
2)Add html, head, script and body tag.
<html>
<head>
<script></script>
</head>
<body>
</body>
</html>
3) Add CDN links for jquery tooltip .css and .js files in head tag:-
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
4) Add textbox control in body tag as below:
<input type="text" title="Please enter your name."/>
5)Add jQuery code in script tag in head section to show tooltip for below textbox.
<script type="text/javascript">
$(document).ready(function(){
$(document).tooltip();
});
</script>
Full Code for jQuery tooltip:-
<html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).tooltip(); }); </script> </head> <body> <input type="text" title="Please enter your name."/> </body> </html>
Snapshot of code:-
Output:-
No comments:
Post a Comment