主页 / 问题 / 1577335
Accepted
Дима Й
Asked:2024-04-23 00:34:53 +0800 CST2024-04-23 00:34:53 +0800 CST

更新 Bootstrup 5 工具提示中的文本（不带动画）

  • 772

当 ajax 响应到达时，我使用此设计来更新工具提示中的文本。

 let element = document.getElementById('idElement');
 const tooltipElement = bootstrap.Tooltip.getOrCreateInstance(element)
 tooltipElement.setContent({'.tooltip-inner': 'New text'})

这段代码有效。但更新的时候这个提示逐渐消失又出现。如何在不闪烁的情况下更新工具提示内容？也许，您需要以某种方式在更新阶段禁用动画或使用其他方法来更新工具提示。完全禁用动画是不合适的。引导程序 5.3.0-alpha3

javascript

1 个回答

  1. Best Answer

    目前看来，在 Bootstrap 5 中切换工具提示实例动画（不更改全局设置）的唯一方法是通过_config.animation. 在这种情况下：

    tooltipElement._config.animation = <true|false>;

    演示，以及引导我们选择拐杖选项的逻辑：

    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

let element = document.getElementById('test');
const tooltipElement = bootstrap.Tooltip.getOrCreateInstance(element);

// для демонстрации, замена текста в асинхронном цикле (каждые 2с)
setInterval(() => {
  time = (new Date()).toLocaleTimeString();
  tooltipElement._config.animation = false;
  tooltipElement.setContent({'.tooltip-inner': `New text ${time}`});
  tooltipElement._config.animation = true;
}, 2e3);
    body  { padding: 1rem; }
#test { border: 1px solid #ccc; cursor: default; }
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<span id="test" class="px-4 py-2" data-bs-toggle="tooltip" 
  data-bs-placement="bottom" data-bs-title="Tooltip on bottom"
>
  Tooltip demo
</span>

    根据Bootstrap 5.3文档（回答时的当前版本），可以通过更改数据属性来控制属性值，即 立即采用标准的、明显的路径：

    element.dataset.bsAnimation = false;

    ，但事实证明，在运行时更改数据属性没有任何效果……引导程序仍然保持原来的样子💩。如果我们查看框架代码，我们会发现在显示工具提示时，仅考虑内部配置对象，而不尝试读取元素的数据属性。这就是第 240 行animation方法中使用的参数值 getter的内部实现方式：show

    _isAnimated() {
  return this._config.animation || (this.tip && this.tip.classList.contains(CLASS_NAME_FADE))
}

    （有一个方法_getConfig可以读取它，但实际上显示时并没有调用它🤷）

    因此：由于框架中有关 JS API（和/或其官方网站上的文档）的缺陷，通过脚本更改 Tooltip 组件配置的唯一选择是覆盖无证财产_config。
    通过 hack 的解决方案当然是不好的，但是没有其他选择......而且它似乎比双重调用内部解决方案更邪恶_getConfig，它执行更多操作，因此可能会产生不需要的副作用（例如，我假设title它也会覆盖工具提示）。

    • 1

相关问题