Jquery 如何在工具提示中显示AJAX响应？_Jquery_Ajax_Tooltip_Jquery Tooltip

Jquery 如何在工具提示中显示AJAX响应？

jquery ajax

Jquery 如何在工具提示中显示AJAX响应？,jquery,ajax,tooltip,jquery-tooltip,Jquery,Ajax,Tooltip,Jquery Tooltip,我正在制定一项要求。它说，当用户将鼠标悬停在姓名上时，应该在工具提示中显示用户的数据，如手机号码、电子邮件id。我能够捕获悬停时的名称并获取数据。我无法在工具提示中显示数据。这是我试过的 one.php <html> <head> <script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script> <

我正在制定一项要求。它说，当用户将鼠标悬停在姓名上时，应该在工具提示中显示用户的数据，如手机号码、电子邮件id。我能够捕获悬停时的名称并获取数据。我无法在工具提示中显示数据。这是我试过的

one.php
<html>

    <head>
        <script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>  
        <script src="js/tooltip.js" type="text/javascript"></script>
        <script>

        function getdata(){
            var data1=document.getElementById('lbl1').innerHTML;

            alert(data1);
            var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {

                                //var showtip=xmlhttp.responseText
                                //alert(showtip);
                                $("#showtip").html(xmlhttp.responseText);
                                $("#showtip").tooltip();

            }
    }
    xmlhttp.open("POST", "tooltipajax.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("data1="+data1);

        }


        </script>


    </head>
    <body>


        <label id="lbl1" onmouseover="getdata()">John</label>


        <div id="showtip"></div>

    </body>

</html>

我正在为此使用jQueryTools：

请帮助我达到这个要求。

你对插件的概念理解错误。它在一个特殊的框中显示悬停元素的title属性，允许您使用css对其进行样式设置。就这样。因此，您需要将要显示的整个html放在

title

属性中

-工作演示

$(function(){
    $('#lbl1').one('mouseover', function(){ //you need to load data only once!
        var $this = $(this),
            data1 = $this.text(); //get label text or whatever you need
        console.log(data1);

        $.post( //do not create XMLHttpRequest manually
        '/echo/html/', //use real url
        { 
            html: 'some server response', //this line is just a fixture
            data1: data1 //actual data
        }, 
        function(data){ //success callback
            $this.attr('title', data) //set title attribute
                 .tooltip() //init tooltip
                 .mouseover(); //trigger mouseover once again to show tooltip
        });
    });
});

如果您已经安装了jquery，为什么要手动创建

XMLHttpRequest

？：）你确定你的工具提示插件加载正确吗？检查控制台或网络选项卡以查看问题。您在控制台中看到的

xmlhttp.responseText

的值是多少？它们是字符串还是json？是字符串不是json muralitool提示加载正确我给出了comsole中出现的错误。

I am getting this error:Cannot find tooltip for [object Object]

$(function(){
    $('#lbl1').one('mouseover', function(){ //you need to load data only once!
        var $this = $(this),
            data1 = $this.text(); //get label text or whatever you need
        console.log(data1);

        $.post( //do not create XMLHttpRequest manually
        '/echo/html/', //use real url
        { 
            html: 'some server response', //this line is just a fixture
            data1: data1 //actual data
        }, 
        function(data){ //success callback
            $this.attr('title', data) //set title attribute
                 .tooltip() //init tooltip
                 .mouseover(); //trigger mouseover once again to show tooltip
        });
    });
});