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属性,改一下就好了。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。