请教如何做到这样的提示功能？

我在网上查过很多的tips提示里例子，都是只能在提示的内容中输入文本内容，如果我想在提示的内容中包括表格应该怎样做呢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript测试浮动提示层</title>
<style type="text/css">
*{font-size:12px;}
ul{ list-style-type:none; margin:0px; padding:0px;}
.contentBox{ width:300px; border:1px solid #000000; position:relative; z-index:100001}
.ctTop{ width:300px; height:20px; font-weight:bold; background-color:#009966; font-size:14px; text-align:center; padding-top:8px; cursor:hand;}
.ctMain{ width:260px; height:50px; background-color:#00CC00; padding:10px 0 10px 40px;}
.ctBottom { background-color:#009966; text-align:center; cursor:hand; font-weight:bold; padding-top:2px;}
a:hover { color:#000000;}
#middleBackgroundLayer {background-color:#00CCFF; position:absolute; top:0; left:0; display:none;
filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);
opacity: 0.6;
}
</style>
</head><body>
<div id="floatLayer">
<ul>
<li><a href="#" target="_blank" onmousemove="showContent(0)" onmouseout="hiddenContent(0)">李白---宣州谢朓楼饯别校书叔云</a></li>
</ul>
</div><div id="content0" class="contentBox" style="display:none;">
<div class="ctTop">宣州谢朓楼饯别校书叔云</div>
<div class="ctMain">
弃我去者，昨日之日不可留<br>
乱我心者，今日之日多烦忧<br>
长风万里送秋雁①，对此可以酣高楼 <br>
蓬莱文章②建安骨，中间小谢又清发<br>
俱怀逸兴壮思飞，欲上青天览日月<br>
抽刀断水水更流，举杯消愁愁更愁<br>
人生在世不称意，明朝散发弄扁舟
</div>
</div>
<script type="text/javascript">
//此处为上三首诗的代码
function showContent(i){
showid = "content" + i;
var target = document.getElementById(showid);
target.style.display = "block";
target.style.position = "absolute";
target.style.top = event.clientY + 20;
target.style.left = event.clientX - 20;
}function hiddenContent(i){
hiddenid = "content" + i;
document.getElementById(hiddenid).style.display = "none";
}
//-----------------------------------------------------------------------------------------------------
//此处为下二首诗的代码
function showMiddleContent(i){
var bgl = document.getElementById("middleBackgroundLayer");
bgl.style.display = "block";
bgl.style.width = screen.Width;
bgl.style.height = screen.Height;
bgl.style.backgroundColor = "#999999";var psX = (screen.Width - 700)/2;
var psY = (screen.Height - 300)/2;
var mdl = "middleContent" + i;
var mdc = document.getElementById(mdl);
mdc.style.display = "block";
mdc.style.position = "relative";
mdc.style.top = psX;
mdc.style.left = psY;
}function hiddenMidFloatLayer(i){
document.getElementById("middleContent" + i).style.display = "none";
document.getElementById("middleBackgroundLayer").style.display = "none";
}
//-----------------------------------------------------------------------------------------------------
//以下为浮层，鼠标托动效果的代码
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(obj){
if(event.button==1){//如果按下左键
obj.setCapture();//锁定本标题层
var win = obj.parentNode; //取得此标题层的父层
x0 = event.clientX;//鼠标横坐标,在此用作标记一个走过的"脚印"
y0 = event.clientY; //鼠标纵坐标
x1 = parseInt(win.offsetLeft); //得到该层位置坐标，并将XXpx转换为xx整数
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + (event.clientX - x0) - 10; //x1为层的left实坐标，event.clientX - x0为要移动的坐标差，此坐标差可为正，也可为负，为什么减10呢???????????
win.style.top = y1 + (event.clientY - y0) - 100;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
</script>

</body>
</html>
提示的内容中输入文本内容?
把文本内容替换为表格的HTML代码就可以了