开发者社区> 问答> 正文

自己用jQuery写的tooltip为什么tooltip只能出现一次?

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出现一次第二次就没了。

展开
收起
小旋风柴进 2016-05-31 11:47:56 2470 0
1 条回答
写回答
取消 提交回答
  • 把你的css('visibility','visible')改成show(),jq的hide()是调整display属性滴,你显示的时候用的是visibility属性,改一下就好了。

    2019-07-17 19:21:45
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载