jQuery UI Tooltip Tutorial | Tooltip Widget in jQuery UI - jQuery UI Tutorial 15

Показать описание

Notes for You:: jQuery UI Tooltip Widget.
- 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

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>

</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

Follow the link for previous video:
jQuery UI Tutorial 14 - jQuery Menu Tutorial

=========================================

jQuery UI Tutorials Playlist:-

=========================================
Watch My Other Useful Tutorials:-

Bootstrap Tutorials Playlist:-

Dreamweaver Tutorials Playlist:-

PHP Tutorials Playlist:-

=========================================

► Subscribe to our YouTube channel:

► Visit our Website:

=========================================
Hash Tags:-
#ChidresTechTutorials #jQueryUI #jQueryUITutorial