Java-Script/JQueryUI_Widget Control.html at main · 26312/Java-Script · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
        <head><h3><i><i><b>Tooltip Widget Control in JQuery UI</b></i></h3>
            <title>Tooltip Widget Control in JQuery UI</title>
            <link rel="stylesheet" href="CSS/effects.css">
            <link rel="stylesheet" href="jquery-ui/jquery-ui.css">
            <link rel="stylesheet" href="jquery-ui/jquery-ui.structure.css">
            <link rel="stylesheet" href="jquery-ui/jquery-ui.theme.css">
        </head>
            <body>
                <div id="div1">
                    <img id="img1" title="" src="images/audi_logo.jpg" width="500px">
                </div>

            </body>
            <script type="text/javascript" src="JS/jquery.js"></script>
            <script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
            <script>

                $("img").tooltip({

                    content : 'Welcome to Audi',
                    show: {effect:"bounce",duration: 5000},
                    hide:{effect:"explode",duration:2000}


                    //https://api.jqueryui.com/category/effects/  --> various effects can be found in this link

                })

            </script>
     </html>