我的代码是
<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”,当悬停AROUND“hhh”时,应该出现“bte”。我想知道如何实现这一目标?我曾尝试display:none
,但它不起作用。
答案 0 :(得分: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();
});
答案 1 :(得分:0)
尝试这样:我分析了插件并为您提供解决方案 问题。感谢
$(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>
答案 2 :(得分:0)
谢谢大家!我补充道 $( '#HHH')。tooltipster({ 内容:$('#BTE')。show() }), 并添加另一个 div显示无到我的“BTE”,它可以正常工作
如下:
<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>
答案 3 :(得分:0)
这将使用下一个隐藏元素的内容更新工具提示(在我的情况下是一个内部有一些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');
}
}
});
});