HTML-контент всплывающего окна Bootstrap 5

Я использую всплывающее окно Bootstrap 5, и оно не может отобразить нужный мне HTML-контент.

Я перешел по этой ссылке в качестве решения:

Как добавить атрибут тега html в popover setAttribute() начальной загрузки 5?

Он работал для некоторых атрибутов HTML, например: data-bs-content = "<h1>Hello</h1>"

Но мне нужно отобразить таблицу:

<table>
<tr>
  <td>A班</td>
  <td>B班</td>
  <td>C班</td>
</tr>
<tr>
  <td>John</td>
  <td>Mary</td>
  <td>Joy</td>
</tr>

Мой HTML:

<button type = "button" class = "btn btn-lg btn-danger testing" data-bs-toggle = "popover" 
data-bs-content  = "
<table>
<tr>
  <td>A班</td>
  <td>B班</td>
  <td>C班</td>
</tr>
<tr>
  <td>John</td>
  <td>Mary</td>
  <td>Joy</td>
</tr>
    </table>
" 
title = "Popover title"
data-bs-trigger = "hover"
>Click to toggle popover</button>

И Javascript:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle = "popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl,

   // options object as a second param
   {
      html: true
    }
  )
})

Что мне не хватает? Требуется ли что-то, если я хочу использовать таблицу в data-bs-content?

javascript html bootstrap-5 popover

27.08.2024 11:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В документации начальной загрузки говорится:

По умолчанию этот компонент использует встроенный очиститель контента, который удаляет любые элементы HTML, которые явно не разрешены.

Это означает, что вам необходимо добавить все элементы таблицы в список разрешенных, чтобы это работало.

Пример:

const allowList = bootstrap.Popover.Default.allowList;
allowList.table = [];
// tbody and thead are needed since they're automatically added by the browser if not present
allowList.tbody = [];
allowList.thead = [];
allowList.td = [];
allowList.tr = [];

var popoverTriggerList = [].slice.call(
  document.querySelectorAll('[data-bs-toggle = "popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(
    popoverTriggerEl,

    // options object as a second param
    {
      html: true,
      allowList: allowList,
    }
  );
});

Большое спасибо! Это сработало! Теперь я понял, некоторые элементы нужно вручную добавлять в список разрешенных.

— 27.08.2024 12:10

27.08.2024 11:56