[英]jQuery Tooltipster should show a hidden DIV on hover
我的代码是
<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
但不起作用。
如果您不想使用任何插件,请尝试这样,
// 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();
});
尝试这样:我分析了插件,并针对您的问题提出了解决方案。 谢谢
$(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>
谢谢你们! 我添加了$('#HHH')。tooltipster({content:$('#BTE')。show()}),然后在我的“ BTE”中添加了另一个div显示,但没有显示
如下:
<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>
$(function () {
$('#HHH').tooltipster({
content: $('#BTE').show()
})
})
</script>
<div style="display:none">
<div id="BTE" style="display:none">Driven by: <ul><li>Economics of scale (cost advantage)</li>
<li>Patents and proprietary products</li>
<li>Brand strength</li>
<li>Government regulation</li>
<li>Capital investment requirements</li>
<li>Access to distribution channels</li>
</ul>
</div>
</div>
这将使用下一个隐藏元素的内容更新工具提示(在我的情况下为其中包含一些html的div):
$(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');
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.