我对Javascript知之甚少,但我有一个popover()函数,它可以在单击按钮时显示弹出文本。我只想弹出的文本自动淡入淡出,大约2秒后,按钮被点击。我设置了这段代码,它会在2秒后关闭实际的按钮,而不是弹出框。我想我需要以某种方式瞄准data-content
元素,但是我不确定如何去做。您的帮助我们将不胜感激。
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
setTimeout( function () {
$('[data-content="item added"]').hide('fade')
}, 2000)
</script>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-animation="true" title="Popover title" data-content="item added">Click to toggle popover</button>
发布于 2018-07-11 03:37:57
这应该是可行的。时间以毫秒为单位。
如果希望在单击时显示弹出窗口,请删除触发行
$('[data-toggle="popover"]').popover({
delay: { "show": 1000, "hide": 2000 },
trigger: 'hover'
})
发布于 2018-07-11 03:52:40
这里有一种方法,它使用jQuery为工具提示创建一个新的DOM元素,并使用.fadeOut()
在单击时将其删除。您只需将.tooltip-trigger
类添加到任何具有title
属性的元素中,就可以在页面中获得相同的效果。
$('.tooltip-trigger').hover(function(){
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
});
$('.tooltip-trigger').mousemove(function(e) {
var mouseX = e.pageX + 20; //Get X coords
var mouseY = e.pageY + 10; //Get Y coords
$('.tooltip').css({ top: mouseY, left: mouseX })
});
$('.tooltip-trigger').click(function(e) {
$('.tooltip').fadeOut( "slow" );
});
.tooltip {
display:none;
position:absolute;
background-color:#ffff94;
border: 1px solid grey;
border-radius:5px;
padding:2px;
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="button" class="btn btn-lg btn-danger tooltip-trigger" title="Popover title">Click to toggle popover</button>
这是一个fiddle。
https://stackoverflow.com/questions/51272760
复制相似问题