Jquery Dialog mouseover

Question

我的代码如下：

https://jsfiddle.net/maanish/g932rsxk/1/

我尝试过各种选项，tooltip，qtip，dialog。我能够显示对话框。但是该框位于mouseover的位置，然后发生mouseout并继续循环闪烁。

我可以调整x和y位置，但我相信这不是一个可行的解决方案。

我对如何使用动态更新的html元素进行函数调用有任何想法。

基本上，我想在(qtip)上向mouseover类的链接显示工具提示content-item样式。

$(document).ready(function(e) {

    function onmouseover (box, data, e)
    {

        console.log(e.pageX);

        $(box).css({'font-weight': 'bold', 'color': 'blue'});

        box.html(data);

        box.dialog({
            autoOpen  : false,
            title     : "Your jQueryUI Dialog",
            show      : "fade",
            hide      : "fade",
            option    : {"position": [e.pageX + 5, e.pageY + 5]},
            width     : 500, //orig defaults: width: 300, height: auto
            buttons   : {
                Ok: function() {
                    $(box).dialog('close');
                }
            }
        });

        box.dialog('open');

    }

    function onmouseout()
    {    
        $('.box').dialog();
        $('.box').dialog('close');
    }

    //Get the message ID
    $(document).on({

        click: function(e)
        {    
            if (e.target.nodeName == "A")
            {
                e.stopPropagation();
            }
            else
            {
                console.log($(this).children('#msgid').text());
            }    
        },

        mouseover: function(e)
        {    
            if (e.target.nodeName == "A")
            {
                var box = $('.box');
                var data = "Hello WOrld";
                var value = ($(e.target).attr('href'));

                onmouseover(box, data, e);
            }    
        },

        mouseout: function(e)
        {    
            if (e.target.nodeName == "A")
            {
                var value = ($(e.target).attr('href'));
                onmouseout(e); 
            }
        }

    }, ".comment-item");

    //Show Initial Data
    $.ajax({
        type      : "get",
        url       : "main_board.php",
        cache     : false,
        data      : { get_param : "value" },
        dataType  : "json",
        success   : function(data) {

            $.each(data, function(index, element) {
                var final_data = "<div class='comment-block'>" 
                + "<div class ='comment-item'>" 
                +  "<div id='msgid' style='display: none;'>"
                + element.id 
                + "</div>" 
                +"<div class ='comment-avatar'>" + "<img src='avtar.png' alt= 'avatar'></div>" 
                + "<div class='comment-post'>" +"<h3><a href =" + element.UserName +">" 
                + element.UserName 
                + "</h3></a><span><p>" 
                + element.Messages 
                + "</span></p>"
                + "</div></div></div>";

                var show_data = $(final_data).hide().fadeIn();

                $("#php").append(show_data);                    
            });

        }
    });

});