Skip to content

All topics  /  jQuery

Jquery UI Tooltip Example | Tooltip In Jquery Example

jQuery ·

Hi Guys,

In this example,I would like to share with you create tooltip in jquery ui.you can easy use tooltip in jquery ui.

jQueryUI provides tooltip() method to add tooltip to any element on which you want to display tooltip.

Example


 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Tooltip</title>
    <link rel="stylesheet" href="https://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>
    <style>
        label{
            display: inline-block;
            width: 5em;
        }
        .main-div{
            padding:50px 20px 30px 80px;
            width:20%;
            border-radius: 5px;
            border:2px solid green;
            margin: 0 auto;
        }
        input{
            width: 100%;
            padding:10px 10px;
            margin-left:-40px;
        }
        p{
            font-size:18px;
        }
        h2{
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>jQuery UI Tooltip - Nicesnippets.com</h2>
    <div class="main-div">
        <input id="age" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit."></p>
        <p>Hover the field to see the tooltip.</p>
    </div>

 
    <script>
        $( function() {
            $( document ).tooltip();
        });
    </script>
</body>
</html>

It will help you...

More on this topic