Bootstrap 5.0.2 工具提示 data-bs-delay 属性问题

Question

BS 5.0.2 工具提示显示和隐藏延迟存在问题。 根据 BS 文档，可以将属性中的显示和隐藏延迟设置为如下所示的对象：

data-bs-delay:{show:2000, hide:1000}

或者

data-bs-delay={show:2000, hide:1000}

但工具提示会毫无延迟地显示/隐藏，或者控制台显示"Uncaught TypeError: TOOLTIP: Option "delay" provided type "string" but expected type "(number|object)"。”

仅在设置时

data-bs-delay=2000

给出延迟，但显示和隐藏是相同的。

到目前为止，我已经尝试了互联网上建议的属性中的所有引号变体，但没有任何乐趣。我已经找到了解决方案，但是使用 jquery，这是我对 ATM 不感兴趣的。

是否可以在属性中设置工具提示显示和隐藏延迟的不同时间？

data-bs-delay:{show:2000, hide:1000}

data-bs-delay={show:2000, hide:1000}

data-bs-delay=2000

Answer 1

我还没有找到一种使用该data-bs-delay属性来实现此目的的方法，但是已经找到了一种使用以下代码为每个工具提示提供全局延迟的方法（我认为效果更好）

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl,{delay: { "show": 500, "hide": 100 }});
})

第二个参数bootstrap.Tooltip(element,config)是一个config对象，我假设您可以覆盖下面的任何默认值（我只测试了该delay选项）

const Default = {
  animation: true,
  template: '<div class="tooltip" role="tooltip">' +
              '<div class="tooltip-arrow"></div>' +
              '<div class="tooltip-inner"></div>' +
            '</div>',
  trigger: 'hover focus',
  title: '',
  delay: { "show": 500, "hide": 100 },
  html: false,
  selector: false,
  placement: 'top',
  offset: [0, 0],
  container: false,
  fallbackPlacements: ['top', 'right', 'bottom', 'left'],
  boundary: 'clippingParents',
  customClass: '',
  sanitize: true,
  sanitizeFn: null,
  allowList: DefaultAllowlist,
  popperConfig: null
}

我不是 JS 专家，但是这个小技巧帮我完成了这项工作:)