jQuery Tooltipster 应该在悬停时显示隐藏的 DIV答案

【问题标题】：jQuery Tooltipster should show a hidden DIV on hoverjQuery Tooltipster 应该在悬停时显示隐藏的 DIV
【发布时间】：2014-03-28 06:56:39
【问题描述】：

我的代码是

<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，但它不起作用。

【问题讨论】：

在 jsfiddle 中添加代码
你试过 display:none 使用 css 或 jquery
是的，我试过不显示，但要么我都没有出现，要么都出现

标签： javascript jquery css tooltipster

【解决方案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

【讨论】：

【解决方案2】：

尝试这样：我分析了插件并为您提供了解决方案问题。谢谢

$(document).ready(function() {
    $('#HHH').tooltipster({
        content: $('<div id="BTE">ABCDEFG</div>')
    });
});


<div id="HHH"> 
    This div has a tooltip with HTML when you hover over it!
</div>

【讨论】：

也很好用！唯一的问题是我的“ABCDEFG”是
的列表

$(document).ready(function () { $('.tooltip').tooltipster({ contentAsHTML: true, updateAnimation: false, functionBefore: function (origin, continueTooltip) { continueTooltip(); if (!origin.data('cached')) { var content = origin.next().contents(); // get the next div origin.tooltipster('content', content).data('cached', true); origin.tooltipster('show'); } } }); });