doc ado play pad com data fff ... his

OA現金盤源碼下載http://hubawl.com

裏有一行數據 “那片笑聲讓我想起......” 假設超出規定長度將用......代替，

而現在要通過鼠標移動到......上 顯示全部內容，移出則消失。如下圖：

<a href=‘#‘ onMouseOver=‘mouseOver(this,event,"+s+");‘ onMouseOut=‘mouseOut();‘>.....</a>
//data是提示框要顯示的全部內容

CSS
.tooltip {
position: absolute;
display: none;
z-index: 9900000;
outline: none;

padding: 5px;
border-width: 1px;
border-style: solid;
border-radius: 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

function mouseOver(t,e,data){
//參數含義
//t:指當前對象，即超鏈接<a>
//e:event事件
//data:要顯示的內容
var tooltipHtml = "<div id=‘tooltip‘ class=‘tooltip‘>"+data+"</div>";

$(t).append(tooltipHtml); //添加到頁面中
$("#tooltip").css({
"top": (e.pageY) + "px",
"left": (e.pageX) + "px"
}).show("fast"); //設置提示框的坐標，並顯示
}
function mouseOut(){
$("#tooltip").remove();
}

-----------------------華麗的分割線------------------------------

另一種方法：

<a id="myTip">鼠標移在我上面有驚喜！</a>

$(document).ready(function(){
$("#myTip").mouseover(function(event){
var tooltipHtml = "<div id=‘tooltip‘ class=‘tooltip‘>Hello！</div>";
$(this).append(tooltipHtml);
$("#tooltip").css({
"top": (event.pageY) + "px",
"left": ($(this).width()) + "px" //緊跟在內容的後面
}).show("fast"); //設置提示框的坐標，並顯示
}).mouseout(function(){
$("#tooltip").remove();
})
})

OA現金盤源碼下載