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

q3aa0525  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(251)

BS 5.0.2工具提示显示和隐藏延迟存在问题。According to BS documentation可以将属性中的显示和隐藏延迟设置为如下对象:

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。
是否可以在属性中为工具提示显示和隐藏延迟设置不同的时间?
第一个

bbuxkriu

bbuxkriu1#

我还没有找到使用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
}

我不是JSMaven,但是这个小黑客为我做了工作:)

相关问题