HTML和JS代码如下:
<div class="wrap">
<p>tooltip<a data-tooltip="tooltip1">tooltip1</a></p>
<p>tooltip<a data-tooltip="tooltip2">tooltip2</a></p>
<p>tooltip<a data-tooltip="tooltip3">tooltip3</a></p>
<p>tooltip<a data-tooltip="tooltip4">tooltip4</a></p>
<span id="tooltip"></span>
</div>
<!--<script type="text/javascript" src="jquery-2.2.1.js"></script>-->
<script type="text/javascript">
$(function(){
$('a[data-tooltip*=tooltip]').each(function(){
$(this).mouseover(function(){
var tooltip=$(this).attr('data-tooltip');
var left=$(this).position().left;
var top =$(this).position().top+20;
showTooltip(tooltip,left,top,true)
}
);
$(this).mouseout(function(){
showTooltip('','','',false)
})
});
function showTooltip(html,left,top,bool){
if(bool){
$("#tooltip").html(html).css('visibility','visible').css({'left':left,'top':top})
}else{
setTimeout( $("#tooltip").hide(),300)
}
}
})
hover上去时tooltip出现一次第二次就没了。
少年,把你的
css('visibility','visible')
改成show()
,jq的hide()
是调整display
属性滴,你显示的时候用的是visibility
属性,改一下就好了。