Home » Jquery » jquery – How can I display a 'modal' above mouse position?

jquery – How can I display a 'modal' above mouse position?

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have a table and I try to display a popup when mouse is over a column title
and hide when mouseout

popup behavior is OK but not position

I try to add position based on mouse position but it prevent popup display

table

<th id="label_id"></th>

popup

<div id="bubble_id" class="bubble" style="display:none;">
   <div class="bubble-text">
      <h4>Definition</h4>
        <hr>
      <p>my definition</p>
   </div>
</div>

JS

        $('#label_id').hover(

            // au survol de la souris sur le champ en-tête
            function () {
                $('#bubble_id').removeAttr("style");

                // mouse coordonate
                var left = $(this).offset().left;
                var top = $(this).offset().top;
                // $('#bubble_id').attr("style","left:"+left+"px;"+"top:"+top+"px;");

            }, 

            function () {
                $('#bubble_id').css({"display":"None"});

            }
        );

How to&Answer: