jQuery UI Tooltip Widget - jQuery UI Tutorial 15
Рет қаралды 1,927
Күн бұрынNotes for You:: jQuery UI Tooltip Widget - jQuery UI Tutorial 15
helps us to create a theme able and customizable tooltip UI control.
Creating Tooltip Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tooltip Demo</title>
</head>
<body>
</body>
</html>
2. Link the necessary jQueryUI libray files to the HTML document
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
3. Code the structure of the widget (i.e. HTML or markup):
To create a Tooltip widget; we can create any HTML element with title attribute.
<div title="You hovered on me" id="tooltip">Mouse over on me</div>
<input type="text" title="Enter your name" id="txtName"/>
4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector, call tooltip jQuery UI function on it
<script type="text/javascript">
$("#tooltip").tooltip();
$("#txtName").tooltip();
</script>
Complete Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tooltip Demo</title>
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div title="You hovered on me" id="tooltip">
Mouse over on me
</div>
<input type="text" title="Enter your name" id="txtName"/>
<script type="text/javascript">
$("#tooltip").tooltip();
$("#txtName").tooltip();
</script>
</body>
</html>
Note:
replace < with less-than symbol.
replace > with greater-than symbol.
=========================================
Follow the link for next video:
jQuery UI Tutorial 16 - jQuery UI Dialog Tutorial
• jQuery UI Dialog Widge...
Follow the link for previous video:
jQuery UI Tutorial 14 - jQuery Menu Tutorial
• jQuery UI Menu Widget ...
=========================================
jQuery UI Tutorials Playlist:-
• jQuery UI Tutorials
=========================================
Watch My Other Useful Tutorials:-
Bootstrap Tutorials Playlist:-
• Bootstrap4 Tutorials
Dreamweaver Tutorials Playlist:-
• Dreamweaver Tutorials
PHP Tutorials Playlist:-
• PHP Tutorials
=========================================
► Subscribe to our KZbin channel:
/ chidrestechtutorials
► Visit our Website:
www.chidrestec...
=========================================
Hash Tags:-
#ChidresTechTutorials #jQueryUI #jQueryUITutorial
@ChidresTechTutorials 5 жыл бұрын
SUBSCRIBE, SHARE & SUPPORT: kzbin.info VISIT & LEARN AT FREE OF COST: www.chidrestechtutorials.com
@sunildhyani928 7 жыл бұрын
Hi this is sunil dhyani sir ap bahut acha sikha rhe ho bahut maza ara h shikne me sir i have question ?--what is the different between jquery.com and jqueryui.com/ thanks i am waiting your Ans.....
@ChidresTechTutorials 7 жыл бұрын
first of all thank you so much for your learning interest. I think you get answers in the below mentioned links. What is jQuery? kzbin.info/www/bejne/eau7dYl5j7N2opI What is jQuery UI? kzbin.info/www/bejne/hHmaq395aN52bLM
SimpliCode
Рет қаралды 1,2 М.