滑鼠移動到隱藏內容時顯示提示框，滑鼠停留在提示框時依舊顯示。滑鼠離開提示框和隱藏內容時提示框消失。
使用時配合table框是固定寬度，將超過寬度的多餘資訊予以省略號顯示。
將table框CSS設定為
table-layout: fixed; word-break: break-all;
多餘的字元顯示為省略號：
.hideMore {
width:60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}顯示提示方塊時使用到的方法說明：
1 、delegate() 方法為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程序，並規定當這些事件發生時執行的函數。
使用 delegate() 方法的事件處理程序適用於目前或未來的元素（例如由腳本建立的新元素）。
2、setTimeout() 方法用於在指定的毫秒數後呼叫函數或計算表達式。
<body>
<table>
//表格内多余的seat将被用省略号来显示
//鼠标移动到这里将显示提示框提示内容(可以自定义)
<td class="hideMore"><span alert-content="$!{policy.seat}">$!{policy.seat}</span>
<table>
<body>javascript代码：
$(function () {
var tableShow = null;
var tipShow = null;
var delayTime = 200;
//离开至表格隐藏tip
$("body").delegate("span", "mouseleave", function () {
tipShow = setTimeout(function () {
$('[data-ui="alert-layer"]').remove()
}, delayTime)
});
//移动至表格显示tip
$("body").delegate("span", "mouseover", function () {
var seat = $(this);
tableShow = setTimeout(function () {
showTip(seat)
}, delayTime)
});
//在tip上继续显示
$("body").delegate('[data-ui="alert-layer"]', "mouseover", function () {
clearTimeout(tipShow)
});
//离开tip隐藏
$("body").delegate('[data-ui="alert-layer"]', "mouseleave", function () {
tipShow = setTimeout(function () {
$('[data-ui="alert-layer"]').remove()
}, delayTime)
});
//予以显示
function showTip(seat) {
var content = seat.attr("alert-content");
var position = {
top: seat.offset().top + seat.height(),
left: seat.offset().left-3,
index: 9999
};
var content = "<p data-ui=\"alert-layer\" class=\"more-seat\"><p class=\"bg\"></p>"+content+"</p>";
$('[data-ui="alert-layer"]').length || ($("body").append(content),
$('[data-ui="alert-layer"]').css(position))
}
})//显示 提示框p的CSS样式
.more-seat {
white-space: nowrap;
color: #566c7e;
position: absolute;
z-index: 99999;
background: #f8fcff;
line-height: normal;
border: 1px solid #c3d5e3;
padding: 14px 16px;
cursor: default;
font-family: verdana;
}使用範例：
# 使用的技術和方法不是很先進，大神可以留下建議。
相關文章：
以上是javascript-頁面中滑鼠移動或停留均顯示提示框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
