如何通过锁定内部html按钮标签“数据-内容”来自动淡出popover()?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (55)

我对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>
提问于
用户回答回答于

这个应该能用。时间是毫秒。

如果你希望弹出以单击方式显示,请删除触发器行。

$('[data-toggle="popover"]').popover({
    delay: { "show": 1000, "hide": 2000 },
    trigger: 'hover'
})
用户回答回答于

下面是一种使用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>

扫码关注云+社区

领取腾讯云代金券