Translate

Wednesday, March 21, 2012

jquery hover popup example (jquery tooltip pop up example)

In this article I will show you a super easy way to show a pop out window on hover. The image below shows how the pop out window looks like.



To do this you need to download these to javascript libraries.

Once you download those to files, follow these two steps.

1> Create an HTMLfile with the content shown below

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.qtip-1.0.0-rc3.min.js"></script>
    <script type="text/javascript">
        // This is the code you will modify to customize it according to your needs
        $(document).ready(function () {

            $('#divHover').qtip({
                content: '<strong>Bolded text pop out<strong>',
                position: {
                    corner: {
                        tooltip: 'leftBottom',
                        target: 'right'
                    }
                },
                style: {
                    tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
                    border: {
                        width: 0,
                        radius: 4
                    },
                    name: 'light', //this determines the font
                    width: 200,
                    height: 30,
                    textAlign: 'left'
                }
            });

        });
    </script>
</head>
<body>
    <br />
    <br />
    <center>
        <div id="divHover" style="width: 100px;">
            hover over me</div>
    </center>
</body>
</html>


2> Wherever you create the html file, create a folder called scripts and put the files you downloaded above in there.



Now double click the html file and you should be able to see the text on hover.


No comments:

Post a Comment

Comments will appear once they have been approved by the moderator