javascript - jQuery Tooltipster 应该在悬停时显示一个隐藏的 DIV

Question

我的代码是

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script type="text/javascript" src="../../_js/jquery.tooltipster.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script>
    $(document).ready(function () {
        $('#HHH').tooltipster({
            content: $('#BTE' )
        })
    })
</script>

我的 div 是 <div id="BTE">ABCDEFG</div>和 <div id="HHH"></DIV>

我最初想隐藏我的“BTE”，当鼠标悬停在“hhh”周围时，“bte”应该出现。我想知道如何实现这一目标？我试过display:none但它不起作用。

Answer 1

如果你不想使用任何插件，试试这样，

// Initially hide the tooltip <div>
$("#HHH").hide();

// On mouse-over add some CSS and show the tooltip <div>
$("#BTE").mousemove(function (e) {
    $("#HHH").css("top", e.pageY);
    $("#HHH").css("margin-left", e.pageX);
    $("#HHH").show();
});

// On mouse-out hide the tooltip <div> again
$("#BTE").mouseout(function () {
    $("#HHH").hide();
});

Demo