使用jquery为table的某一个td添加文字提示框,鼠标滑入出现,鼠标滑出消失
html
//因为tbody的内容是后来添加的,所以可以直接根据table来找到要加效果的td元素
//如果html中td元素不是动态添加的,则可以直接给td加class名或id名,获取后再操作就可以了
<tbody id="guding">
</tbody>
js
var tip = document.createElement('div')
$(tip).attr('class', 'tip')
$(tip).css('pointer-events', 'none')
var box = document.createElement('div')
$(box).attr('class', 'box')
var arrow = document.createElement('div')
$(arrow).attr('class', 'arrow')
$(tip).append(box)
$(tip).append(arrow)
var tdList = $('#guding').find('td:nth-child(3)')
$(tdList).on('mouseenter', function(ev) {
var oEvent = ev || event
$(box).html($(this).text())
$(tip).css('left', oEvent.clietX - 50 + 'px')
$(tip).css('top', oEvent.clientY - 50+ 'px')
$(tip).css('position', 'fixed')
$(tip).css('z-index', '9000')
$('body').append(tip)
var appendHtml = '<div class="tip" style="pointer-events:none;position:fixed;left:' + x + ';top:' + y + ';z-index:9000"><div class="box">'+$(this).text()+'</div><div class="arrow" style="margin-top:-5px"></div></div>'
$('body').append(appendHtml)
var w = $('.box').outerWidth()
var x1 = oEvent.clientX - w / 2 + 'px'
$('.tip').css({
'position': 'fixed',
'left': x1,
'top': y,
'z-index': 9000,
})
})
$(tdList).on('mouseleave', function(ev, a) {
$('body').remove(tip)
})
css
<style type="text/css" media="screen">
.tip {
position: relative;
color: #fff;
text-align: center;
}
.box {
min-width: 400px;
height: 40px;
line-height: 40px;
background: #3c3636;
}
.arrow {
width: 10px;
height: 10px;
position: absolute;
background: #3c3636;
left: 47%;
bottom: -5px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
</style>