//HTML脚本
<spandata-helperinfo="PortfolioTeam"class="icon help"></span>
//JS脚本
$(document).on({
mouseenter:function () {
var HelpMsgCode = $(this).attr("data-helperinfo");//Gets the current object property values
$.ajax({
type:"GET",
url:"/Portfolio/GetHelpMessageByCode",
//url: "/Subscription/GetHelpMessageByCode",
data: { Code: HelpMsgCode },
dataType:"json",
success:function (item) {
var varJson = $.parseJSON(item.data); //string Turn json
var varContent = varJson.Root.HelpMessage.Content; //Gets the specified JSON node contents
var varMsgHtml = "<span class='bubble'>" + varContent + "</span>";//Structural HTML
$(".icon.help").append(varMsgHtml);//Additional HTML to a specified location
}
});
},
mouseleave:function () { //When the mouse leaves, a prompt box disappears
$(".icon.help").html("");//Emptying the balloon
}
},".icon.help");
图片中原文地址:http://www.duanzhihe.com/599.html