Как добавить всплывающую подсказку для выпадающего списка?

Question

[Евгений Комаров]

Здравствуйте!
Пытаюсь отобразить сообщения через всплывающие подсказки на форме bootstrap 5. Если я добавляю

<select data-bs-trigger="hover" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Тестовое сообщение">
...
</select>

то все работает, но если для этого выпадающего списка инициализировать плагин Tom select, то сообщение не отображается...

codepen для иллюстрации примера
Подскажите, куда копать?..

Answer 1

[MrColdCoffee]

Добрый день!
Tom select скрывает настоящий select, а всплывающие подсказки вешаются как раз на него.

Вариант решения:

const originalElement = document.getElementById('tom-select');

new TomSelect( originalElement , {
    onInitialize: function() {      
      // Копируем все атрибуты "data" оригинального select в созданный блок, на который будет вешаться popover
      const attrs = originalElement.attributes;
      for (let i = 0; i < attrs.length; i++) {
        const attrName = attrs[i].name;
        const attrValue = attrs[i].value;
        if ( attrName.startsWith('data-') ) {
          this.wrapper.setAttribute(attrName, attrValue);
        }
      }
// Удаляем атрибут у настоящего select, чтобы на него не вешался лишний обработчик popover
      originalElement.removeAttribute('data-bs-toggle');
    }
  });

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));

Comments

[Евгений Комаров]

Огромное спасибо!