Обновить текст в tooltip Bootstrup 5 без анимации

Question

Использую такую конструкцию для обновления текста в подсказке, когда приходит ответ в ajax.

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

Этот код работает. Но при обновлении эта подсказка плавно пропадает и появляется заново. Как обновить содержимое подсказки без мигания? Возможно, как-то надо отключить анимацию на этапе обновления или использовать другой способ обновления подсказки. Полностью отключить анимацию не подходит. bootstrap 5.3.0-alpha3

Answer 1

Похоже, сейчас единственным путем переключения анимации экземпляра тултипа в 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 (версии актуальной на момент ответа), значениями свойств можно управлять через изменение data-атрибутов, т.е. сразу предполагается стандартный-очевидный путь:

element.dataset.bsAnimation = false;

, но оказывается что изменение data-атрибута в рантайме не имеет эффекта... бутстрап каким ? был, таким и остался. Если посмотреть в код фреймворка, видим что при показе тултипа принимается во внимание только внутренний объект конфига, без попытки считывания data-атрибутов элемента. Вот так внутри реализован геттер значения параметра animation, используемый в методе show на строке 240:

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

(есть метод _getConfig который считывает, но по факту при показе он не вызывается ?)

Как итог: при таких недоработках фреймворка по части JS API (и/или его доков на оф.сайте), единственным вариантом изменения конфигурации компонента Tooltip через скрипт остается перезапись значений объекта в недокументированном свойстве _config.
Решение через хак конечно плохое, но других вариантов не видно... и, оно видится меньшим злом чем двойной вызов внутреннего _getConfig, который выполняет больше действий и поэтому может иметь нежелательные побочки (например, предполагаю что и title тултипа он перезаписывает тоже).

БЛОГ НА HUSL

Обновить текст в tooltip Bootstrup 5 без анимации

Ответы (1 шт):