所以基本上我正在创建一个工具提示功能。
工具提示将作为新的 DOM 元素显示在您单击的元素上。
这是 fiddle :
$(document).ready(function () {
$('.tooltipTarget').click(function () {
var title = $(this).data('tooltip');
$('<p class="tooltip active"></p>')
.text(title)
.appendTo('body')
.fadeIn(250);
var coords = $(this).offset();
var tooltipHeight = $('.tooltip').height() + $(this).height() + 20;
var tooltipWidth = $('.tooltip').width() / 2;
coords.top = coords.top - tooltipHeight;
coords.left = coords.left - tooltipWidth;
$('.tooltip').css({
top: coords.top,
left: coords.left
});
});
});
.tooltip {
display: none;
position: absolute;
border-radius: 1px;
color: #767676;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
background: #f7f7f7;
padding: 10px;
font-size: 12px;
text-align: left;
z-index: 10;
max-width: 250px;
}
<button style="margin: 50px;" data-tooltip="This is a tooltip" class="tooltipTarget">Click me!</button>
但我遇到的问题是,只要触发事件,新的 DOM 元素就会不断出现。
我不会阻止它。我希望它是这样的:
1)您单击按钮
2)出现工具提示
3)再次单击该按钮 - 工具提示消失。
我该怎么做?
工作 fiddle :https://jsfiddle.net/4d8xhLqj/2/
最佳答案
我赞同@JamesSutherland 的观点。工具提示应该预先存在,因此您只需稍后调整它的位置和不透明度即可。
话虽如此,如果您确实需要遵循已有的方法,您可以这样做:
代码片段:
$(document).ready(function() {
$('.tooltipTarget').click(function() {
var title = $(this).data('tooltip');
if (!$('p.tooltip').hasClass('active')) {
$('<p class="tooltip active"></p>')
.text(title)
.appendTo('body')
.fadeIn(250);
var coords = $(this).offset();
var tooltipHeight = $('.tooltip').height() + $(this).height() + 20;
var tooltipWidth = $('.tooltip').width() / 2;
coords.top = coords.top - tooltipHeight;
coords.left = coords.left - tooltipWidth;
$('.tooltip').css({
top: coords.top,
left: coords.left
});
} else {
$('p.tooltip.active').fadeOut(250, function() {
$(this).remove();
});
}
});
});
.tooltip {
display: none;
position: absolute;
border-radius: 1px;
color: #767676;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
background: #f7f7f7;
padding: 10px;
font-size: 12px;
text-align: left;
z-index: 10;
max-width: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button style="margin: 200px;" data-tooltip="This is a tooltip" class="tooltipTarget">Click me!</button>
这是resulting fiddle 。希望这会有所帮助。
关于javascript - 如何在事件上创建 DOM 元素,然后阻止事件处理程序触发,直到 DOM 元素存在?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32274743/