如何通过对准内部html按钮标记"data-content“自动淡出popover()
如何通过对准内部html按钮标记"data-content“自动淡出popover()
提问于 2018-07-11 03:29:05
我对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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-11 03:37:57
这应该是可行的。时间以毫秒为单位。
如果希望在单击时显示弹出窗口，请删除触发行
$('[data-toggle="popover"]').popover({
delay: { "show": 1000, "hide": 2000 },
trigger: 'hover'
})Stack Overflow用户
发布于 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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51272760
复制相关文章
相似问题