mouseover or hover or mouseenter event on td is not firing using jquery

mouseover or hover or mouseenter event on td is not firing using jquery

mouseover or hover or mouseenter event on td is not firing using jquery

See the  below code
<!DOCTYPE html>
<html>
<head>
    <style>
        #customers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        
            #customers th {
                padding-top: 12px;
                padding-bottom: 12px;
                text-align: left;
                background-color: #4CAF50;
                color: white;
            }
    </style>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript" src="jquery.balloon.js"></script>
    <script>
        $(document).ready(function ()
        {
            $('tr, td').hover(function () {
                alert('Testing');
                $('.visibleclass').showBalloon({
                    tipSize: 24,
                    content: gethiddenvalue(event),
                    css: {
                        border: 'solid 4px #5baec0',
                        padding: '10px',
                        fontSize: '150%',
                        fontWeight: 'bold',
                        lineHeight: '3',
                        backgroundColor: '#666',
                        color: '#fff'
                    }
                });
            });

            $("td").hover(function () {
                alert('Testing');
                $('.visibleclass').showBalloon({
                    tipSize: 24,
                    content: gethiddenvalue(event),
                    css: {
                        border: 'solid 4px #5baec0',
                        padding: '10px',
                        fontSize: '150%',
                        fontWeight: 'bold',
                        lineHeight: '3',
                        backgroundColor: '#666',
                        color: '#fff'
                    }
                });
            });
            $("#customers:has(td)").mouseover(function (e) {
                alert('Testing');
                $('.visibleclass').showBalloon({
                    tipSize: 24,
                    content: gethiddenvalue(event),
                    css: {
                        border: 'solid 4px #5baec0',
                        padding: '10px',
                        fontSize: '150%',
                        fontWeight: 'bold',
                        lineHeight: '3',
                        backgroundColor: '#666',
                        color: '#fff'
                    }
                });
              
            });
            $('#customers').on('mouseenter', 'input[type=text]', function (event) 
            {
                alert('Testing');
                        $('.visibleclass').showBalloon({
                            tipSize: 24,
                            content: gethiddenvalue(event),
                            css: {
                                border: 'solid 4px #5baec0',
                                padding: '10px',
                                fontSize: '150%',
                                fontWeight: 'bold',
                                lineHeight: '3',
                                backgroundColor: '#666',
                                color: '#fff'
                            }
                        });
                });​​​​​​​​​​
        });

        function gethiddenvalue(e) {
            //get hiddenvalue and return
            return "test";
        }
    </script>

   
</head>
<body>
    <h2>Table Caption</h2>
    <p>how to show the tooltop when move over the textbox and show the hiddenvalue using jquery balloon.</p>
    <table id="customers">
        <caption>Monthly savings</caption>
        <tr>
            <th>Month</th>
            <th>Savings</th>
            <th>SupportingValue</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
            <td>
                <input type="text" class="visibleclass" id="txt1" width="50" />
                <input type="hidden" id="txt1hidden" value="Should be less than 100">
            </td>
        </tr>
        <tr>
            <td>February</td>
            <td>$50</td>
            <td>
                <input type="text" class="visibleclass" id="txt2" width="50" />
                <input type="hidden" id="txt2hidden" value="Should be less than 500">
            </td>
        </tr>
        <tr>
            <td>March</td>
            <td>$50</td>
            <td>
                <input type="text" class="visibleclass" id="txt3" width="50" />
                <input type="hidden" id="txt3hidden" value="Should be less than 25">
            </td>
        </tr>
    </table>
</body>
</html>