Creating Tooltip Widget


jQuery UI - Creating Tooltip Widget:

Tooltip Widget:
extends the functionality of the title attribute available in HTML

Tooltip widget helps us to create a theme able and customizable tooltip control
Tooltips are used to show some additional information about an element to the user

Creating Tooltip Widget:

1. Create a new HTML document with basic HTML document structure code

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Tooltip Demo</title>

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

Note: As we can add title attribute to any HTML element, hence we can attach tooltip widget to any HTML element

Interview Questions: