如何动态更改Bootstrap 5.0弹出式？

发布于 2025-01-20 08:17:24 字数 971 浏览 3 评论 0原文

在Bootstrap 4.0中，可以动态更改弹出内容（基于selector）或重新定位（使用$ tip属性），

$("body").popover({
    container: 'body',
    content: 'loading...',
    html: true,
    placement: 'right',
    trigger: "hover",
    selector: '.selector1', '.selector2', ... 
 }).on('shown.bs.popover', function () {
    var this = $(event.target);
    ...
    if (this.hasClass('.selector1')) {
      var popover_method = ".../dynamic_popover_1"
    }
    ...
    $.get(popover_method, {
      ...
      },
      function(response) {
        var popover_tip = $(this.data('bs.popover').tip);
        popover_tip.find('.popover-body').empty().append(response.popover_data_json);
        if ((popover_tip.offset().top - $(window).scrollTop()) + popover_tip.height() > window.innerHeight) {
              popover_tip.css({ top: - popover_tip.height() + 5 });
        }
        ...

但如何在Bootstrap 5.0中进行操作。 data（'bs.popover'）不存在吗？

原文

In Bootstrap 4.0 it was possible to change the popover content (based on the selector) or to reposition it (using $tip property) dynamically

$("body").popover({
    container: 'body',
    content: 'loading...',
    html: true,
    placement: 'right',
    trigger: "hover",
    selector: '.selector1', '.selector2', ... 
 }).on('shown.bs.popover', function () {
    var this = $(event.target);
    ...
    if (this.hasClass('.selector1')) {
      var popover_method = ".../dynamic_popover_1"
    }
    ...
    $.get(popover_method, {
      ...
      },
      function(response) {
        var popover_tip = $(this.data('bs.popover').tip);
        popover_tip.find('.popover-body').empty().append(response.popover_data_json);
        if ((popover_tip.offset().top - $(window).scrollTop()) + popover_tip.height() > window.innerHeight) {
              popover_tip.css({ top: - popover_tip.height() + 5 });
        }
        ...

But how to do it in Bootstrap 5.0 where data('bs.popover') doesn't exist anymore?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤凫 2025-01-27 08:17:24

您需要使用香草JS。使用bootstrap.popover.getInstance（mypopovertrigger）在“显示”事件中获取popover实例，然后您可以访问_config和tip根据需要。例如...

var myPopoverTrigger = document.getElementById('myPopover')
var myPopover = new bootstrap.Popover(myPopoverTrigger,{
    content: 'Loading...',
    trigger: 'hover',
})

myPopoverTrigger.addEventListener('shown.bs.popover', function (e) {
    // get the popover instance
    var popover = bootstrap.Popover.getInstance(myPopoverTrigger)
    // change the content
    popover._config.content = "Done!"
    popover.setContent();
    // get the tip and chnage the position
    var tip = popover.tip
    tip.style.left = '300px';
})

演示： https://codeply.com/p/nttvvlo3ef

You need to use vanilla JS instead. Get the popover instance in the 'shown' event using bootstrap.Popover.getInstance(myPopoverTrigger) and then you can access _config and tip as needed. For example...

var myPopoverTrigger = document.getElementById('myPopover')
var myPopover = new bootstrap.Popover(myPopoverTrigger,{
    content: 'Loading...',
    trigger: 'hover',
})

myPopoverTrigger.addEventListener('shown.bs.popover', function (e) {
    // get the popover instance
    var popover = bootstrap.Popover.getInstance(myPopoverTrigger)
    // change the content
    popover._config.content = "Done!"
    popover.setContent();
    // get the tip and chnage the position
    var tip = popover.tip
    tip.style.left = '300px';
})

Demo: https://codeply.com/p/nTTvvLo3ef

回复收藏 0 原文

~没有更多了~