Question

我正在制定一项要求。它表示当用户将鼠标悬停在名称上时，它应该在工具提示中显示用户的数据，如手机号码，电子邮件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>

这是我的AJAX页面。

require_once("./Connections/finalkms.php");
mysql_select_db($database_finalkms, $finalkms);
$data1=$_POST['data1'];
echo $data1;echo "\n";

$query_getdata123 = "Select * from assetowner where AssetOwnerName='".$data1."'";
$getdata123 = mysql_query($query_getdata123, $finalkms) or die(mysql_error());
$row_getdata123 = mysql_fetch_assoc($getdata123);
$totalRows_getdata123 = mysql_num_rows($getdata123);
echo $row_getdata123['EmailId']; echo "\n";
echo $row_getdata123['ContactNo'];
?>

我正在使用jQueryTools：http://jquerytools.org/demos/tooltip/index.html

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

请帮助我达到这个要求。

Answer 1

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

http://jsfiddle.net/L48Qz/ - 工作演示

$(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
        });
    });
});

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

1 个答案: