title값으로 말풍선 띄우기

alt값은 ie에서 밖에 안보이고
그렇다고 일일이 말풍선 레이어를 만들수도 없는 노릇이고
이럴땐 어떻게 해결해야될까? 

HTML

<table id="TooltipTable1" class="table_col" summary="직배주문 조회결과 리스트입니다.">

<colgroup>

<col style="width:38px;" /><col style="width:62px;" /><col style="width:62px;" /><col style="width:38px;" /><col style="width:62px;" />

<col style="width:30px;" /><col style="width:40px;" /><col style="width:38px;" /><col style="width:62px;" /><col style="width:62px;" />

<col style="width:38px;" /><col style="width:62px;" /><col style="width:62px;" /><col style="width:105px;" /><col style="width:42px;" />

<col style="width:46px;" /><col style="width:46px;" /><col style="width:47px;" />

</colgroup>

<thead>

<tr>

<th>1</th>

<th>2</th>

<th>3</th>

</tr>

</thead>

<tbody>

<tr>

<td>홍길동</td>

<td>C</td>

<td><span class="tooltip" title="[홍길동] 말풍선이 뜨냐 안뜨냐">9876</span></td>

<td>20090603</td>

</tr>

</tbody>

</table>

<script type="text/javascript">var TooltipTable1 = setTimeout(function(){ TooltipLayer('TooltipTable1') }, 0)</script>

---

JS

function TooltipLayer(ele){

var ele = document.getElementById(ele);

var eleSpan = ele.getElementsByTagName('span');

// 레이어 떠야할 애만 가져오기 =ㅅ=;;;

var arrTooltip = new Array;

for(var i=0; i<eleSpan.length; i++){

if(eleSpan[i].className == 'tooltip') arrTooltip.push(eleSpan[i]);

}

 

// span title="" 메세지 각자 property에 저장하기

for(var i=0; i<arrTooltip.length; i++){

Tooltip = arrTooltip[i];

Tooltip.msg = Tooltip.title;

while(Tooltip.msg.indexOf("/") != -1)

Tooltip.msg = Tooltip.msg.replace("/", "<br>");

Tooltip.title = "";

}

 

// 툴팁레이어 생성 스타일 넣기

var layer = document.createElement("div");

layer.className = "tooltip_layer";

document.getElementsByTagName("body")[0].appendChild(layer);

 

var style = document.createElement("style");

style.setAttribute("type","text/css");

var css_code = ".tooltip_layer {display:none; position:absolute; top:200px; left:50px; width:209px; padding:10px 10px 5px 10px; font-size:12px; line-height:14px; color:#000; border:1px solid #000; background:#ffffe1;}";

if(style.styleSheet){ // Only For IE6, IE7, IE8

style.styleSheet.cssText = css_code;

}else{

css_code = document.createTextNode(css_code);

style.appendChild(css_code);

}

var head = document.getElementsByTagName("head")[0];

head.appendChild(style);

 

// 레이어 띄우기

for(var i=0; i<arrTooltip.length; i++){

arrTooltip[i].onmousemove = layerShow;

arrTooltip[i].onmouseover = function(){ layer.style.display="block"; };

arrTooltip[i].onmouseout = function(){ layer.style.display="none"; };

}

function layerShow(e){

e = e || window.event;

layer.innerHTML = this.msg;

layer.style.top = 10 + e.clientY + document.documentElement.scrollTop + document.body.scrollTop + "px";

layer.style.left = 10 + e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft + "px";

}

}