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

解决方案

少年，把你的css('visibility','visible')改成show()，jq的hide()是调整display属性滴，你显示的时候用的是visibility属性，改一下就好了。

这篇关于javascript - 自己用jQuery写的tooltip为什么tooltip只能出现一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！