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

  • Question

  • User527424168 posted

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

    see the below code

    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>
    Friday, June 8, 2018 7:56 PM

All replies

  • User36583972 posted


    Hi kmbs82

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

    see the below code

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

    <div></div> <div>See the  below code</div> <div> <div><!DOCTYPE html></div> <div><html></div> <div><head></div> <div>    <style></div> <div>        #customers {</div> <div>            font-family: "Trebuchet MS", Arial, Helvet

    Do you want to achieve the following effect?


    Beside, Please describe your question clearly: for example, what is the current step? Where is the problem? What is the specific error message.

    This will help us quickly analyze your problem.


    Best Regards,

    Yong Lu

    Monday, June 11, 2018 8:29 AM