数据表工具提示图像

我有下表，我需要根据唯一的员工ID显示人物图片的工具提示：

以下代码适用于显示正确的url如何使工具提示显示url的img而不仅仅是url的文本。

代码如下：

$('#ctl00_m_g_615c4803_912c_4ba4_8415_8082f2df612c_ctl00_resultsGrid').dataTable(); $('#ctl00_m_g_615c4803_912c_4ba4_8415_8082f2df612c_ctl00_resultsGrid tbody tr').each( function() { var nTds = $('td', this); var sn = $(nTds[5]).text(); var urlStart = "" var url = urlStart + urlMiddle + urlEnd; //alert(url); this.setAttribute('title', url); }); }); 

输出工具提示只显示文本http：// portal：8081 / ColleaguePhotos / staffnumber / primary.jpg />;

Answer 1

仅标题属性不允许这样做。

你应该使用工具提示插件：

• 检查jquery-ui工具提示小部件（ 此处带有图像的演示 ）
• 或qTip2

或寻找其他的

Answer 2

谢谢所有我使用了你的建议并找到了解决方案：

  this.screenshotPreview = function(){ /* CONFIG */ xOffset = 10; yOffset = 30; // these 2 variable determine popup's distance from the cursor // you might want to adjust to get the right result /* END CONFIG */ $('#ctl00_m_g_615c4803_912c_4ba4_8415_8082f2df612c_ctl00_resultsGrid tbody tr').hover(function(e){ var nTds = $('td', this); var sn = $(nTds[5]).text(); var urlStart = "" var url = urlStart + urlMiddle + urlEnd; this.t = this.title; this.title = ""; var c = (this.t != "") ? "
" + this.t : ""; $("body").append("
"+url+"
"); $("#screenshot") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("fast"); }, function(){ this.title = this.t; $("#screenshot").remove(); }); $('#ctl00_m_g_615c4803_912c_4ba4_8415_8082f2df612c_ctl00_resultsGrid tbody tr').mousemove(function(e){ $("#screenshot") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; $(document).ready(function() { screenshotPreview(); });