Разрешение тегов и атрибутов в Bootstrap Popover

Bootstrap Popover предоставляет удобный способ отображения всплывающих подсказок с дополнительным контентом. Однако по умолчанию Bootstrap ограничивает набор разрешенных тегов и атрибутов в содержимом popover. В этой статье мы рассмотрим, как разрешить любые теги и атрибуты, включая атрибут style, в Bootstrap Popover.

Разрешение тегов и атрибутов по умолчанию
Bootstrap Popover использует белые списки для разрешения тегов и атрибутов в содержимом popover. Эти белые списки определяются в объекте $.fn.tooltip.Constructor.Default.whiteList.

Пример белого списка для тега <div>:

{
  div: [],
  ...
}

Разрешение атрибута style
Чтобы разрешить в popover атрибут style для всех тегов, добавьте следующий код:

$.fn.tooltip.Constructor.Default.whiteList['*'].push('style');

Разрешение пользовательских тегов и атрибутов
Если вам нужно разрешить дополнительные теги и атрибуты, вы можете добавить их в белые списки. Например, для разрешения тега <span> с атрибутом data-custom:

$.fn.tooltip.Constructor.Default.whiteList['span'] = ['data-custom'];

Разрешение всех тегов и атрибутов
Если вам нужно разрешить все теги и атрибуты без ограничений, вы можете заменить белые списки следующим образом:

$.fn.tooltip.Constructor.Default.whiteList = {};

Глобальное применение настроек
Чтобы применить настройки ко всем страницам, использующим popover, добавьте указанный код в общий JavaScript-файл, который загружается на всех страницах вашего сайта, например main.js, app.js или scripts.js.

$.fn.tooltip.Constructor.Default.whiteList['*'].push('style');

$(function () {
  $('[data-toggle="popover"]').popover();
});

В этой статье мы рассмотрели, как разрешить любые теги и атрибуты в Bootstrap popover