c# .net Adsense ADO.NET Linq Viruses/security asp.net MVC JQuery Angular-js Node-js SEO Java C++ SQL API Networking vb.net .Net Css JavaScript Generics c#.Net entity framework HTML Website host Website Construction Guide HTTP tutorial W3C tutorial Web Services JSON Psychology Ionic framework Angular ReactJS Python Computer Android
JQuery

How to create simple jQuery tooltip?

| | JQuery

JQuery tooltip allows lot of customization such as positioning, appearance and ajax results. Below example label element title display the native tooltip for the textbox displays jQuery tooltip.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
       $(document).ready(function () {
            $('#txtJobDesc').tooltip();
        });
    </script>
</head>
<body>
    <div>
       <label id="lblName" for="txtJobDesc" title="job description">job description</label>
<input id="txtJobDesc" type="text" title="Your full name as it appears in paasport" />
    </div>
</body>
</html>

Output:

create simple jQuery tooltip