How do you produce a dialog box on hover over checkbox via jquery

jquery html jquery-ui javascript-events

10,562

This may be the example you are looking for:

Below is a stand-alone example, which should just be copy/play.

Notes:

The element $('#employee-info-div'); was assigned to a variable to make code more efficient and faster to type. (More efficient b/c only check DOM once for the element, retrieve from variable after that.)

Used jQuery hover() method to open the dialog, but initialized the dialog separately (upon document ready). Note that the hover method must have two functions associated with it; the second function need not do anything but it must be there.

The hover-IN method assigned to the class $('.employee-id') runs the code $('#employee-info-div').dialog('open');, which opens the dialog. Note that the 2nd element is accessed via variable name.

Copy/Paste the following code into a separate document in your webroot and run, OR just use the above jsFiddle link to see it all in action.

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
            #employee-info-div{
                width:40%; 
                float:right; 
                padding:5px; 
                background:wheat; 
                color:blue;
            }

        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                var eid = $('#employee-info-div');
                var blurb = '<h2>Employee Information:</h2>Here is some example information about this employee. It can be text inserted like this, or it can be information retrieved from a database via AJAX. For simple AJAX examples, <a target="_blank" href="http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843"> see this StackOverflow post </a> (remember to upvote any posts that are helpful to you, please.)';

                function hovIn() {
                    $(this).css({'font-weight':'bold','color':'blue'});
                    eid.html(blurb);
                    eid.dialog('open');
                }
                function hovOut() {
                    //eid.html(''); //<-- Causes dlg text to appear/disappear as you move mouse on/off checkbox and label
                    $(this).css({'font-weight':'normal','color':'black'});
                }

                $('.employee-id').hover(hovIn, hovOut);

                eid.dialog({
                    autoOpen:false,
                    title:"Your jQueryUI Dialog",
                    show: "fade",
                    hide: "fade",
                    width:500, //orig defaults: width: 300, height: auto
                    buttons: {
                        Ok: function() {
                            $(this).dialog('close');
                        }
                    }
                }); //END eid.dialog

            }); //END $(document).ready()

        </script>
    </head>
<body>

    Hover over below checkbox to see hidden DIV:<br><br>
    <input type="checkbox" id="employee-id" class="employee-id" name="employeeId" ><span class="employee-id">Hover over this checkbox</span>
    <div id="employee-info-div"></div>

</body>
</html>

10,562

Author by

user1234

Updated on June 05, 2022

Comments

user1234 almost 2 years

Since I dont know much about jquery I have am not being able to produce a dialog box on hover over a checkbox.Any suggestion would be helpful.Below is my code

<input type="checkbox" id="employee-id" name="employeeId" onmouseover="produceDialog()">
<div id="employee-info-div"></div>

Similarly my jquery is

produceDialog(){
     $("employee-info-div").dialog({
        open : function ( event, ui ) {

            $(".ui-dialog-titlebar-close").hide();
        },
        dialogClass : 'fixed-dialog',
        resizable : false,
        height : 150,
        width : 250,
        modal : false,
        create : function ( event ) {

            $(event.target).parent().css('position', 'fixed');
        },

    });

}

David Morabito over 10 years

it works. You should add function before produceDialog. Also, you missed the '#' here: $("employee-info-div"). Here's a fiddle! jsfiddle.net/Bg2jD
user1234 over 10 years

Hey yeah thanks it works for normal checkboxes but i have various properties added to teh checkbox from javascript perhaps that's teh reason why its not working.Anyways thanks:)