CODEWITHSUNDEEP
javascriptjqueryhtml
Gebsbo
Gebsbo

Reputation: 121

How to make a Jquery Popup note

How would you make a JQuery popup Note ? This is what I currently have,

Note Code Example

<html>
        <head>
            <script type="text/javascript" src="jquery.js"> </script>
            <style type="text/css" rel="stylesheet">
                #popup {
                    border: 1px solid black;
                    width: 400px;
                }
            </style>
            <script type="text/javascript">
                $(document).ready(function() {
                    $(".HoverMe").mouseenter(function() {
                        var left = $(".HoverMe").position().left;
                        var top = $(".HoverMe").position().top;

                        $("body").append("<div id=\"popup\"> </div>");
                        $("#popup").css("left",left);
                        $("#popup").css("top",top);
                        $("#popup").append("<p> Hello World </p>");
                    });
                    $(".HoverMe").mouseleave(function() {
                        $("#popup").fadeout("fast");
                    });
                });
            </script>
        </head>
        <body>
            <div class="HoverMe">
                Hover Me
            </div>
        </body>
    </html>

Thats not what I wanted, i wanted something like when you hover some text, it displays a popup with some text. The popup is then aligned center of the text if that makes sense.

Any examples would be useful,

Thank you!

Upvotes: 1

Views: 3034

Answers (2)

Matt Ball
Matt Ball

Reputation: 359966

How about using someone else's code for this? I recommend tipsy.

Upvotes: 4

Robert Harvey
Robert Harvey

Reputation: 180868

Have a look here. It's not jQuery, although arguably it's an easier technique than jQuery:

http://sixrevisions.com/css/css-only-tooltips/

Upvotes: 0

Related Questions