<h2 id="js-sanitizer">Sanitizer</h2>

<p>Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML.</p>

<p>The default <code>whiteList</code> value is the following:</p>

{% highlight js %}

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i

var DefaultWhitelist = {

// Global attributes allowed on any supplied element below.

'*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],

a: ['target', 'href', 'title', 'rel'],

area: [],

b: [],

br: [],

col: [],

code: [],

div: [],

em: [],

hr: [],

h1: [],

h2: [],

h3: [],

h4: [],

h5: [],

h6: [],

i: [],

img: ['src', 'alt', 'title', 'width', 'height'],

li: [],

ol: [],

p: [],

pre: [],

s: [],

small: [],

span: [],

sub: [],

sup: [],

strong: [],

u: [],

ul: []

}

{% endhighlight %}

<p>If you want to add new values to this default <code>whiteList</code> you can do the following:</p>

{% highlight js %}

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements

myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements

myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.

// Be careful about your regular expressions being too lax

var myCustomRegex = /^data-my-app-[\w-]+/

myDefaultWhiteList['*'].push(myCustomRegex)

{% endhighlight %}

<p>If you want to bypass our sanitizer because you prefer to use a dedicated library, for example <a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>, you should do the following:</p>

{% highlight js %}

$('#yourTooltip').tooltip({

sanitizeFn: function (content) {

return DOMPurify.sanitize(content)

}

})

{% endhighlight %}

<div class="bs-callout bs-callout-danger" id="callout-sanitizer-no-createhtmldocument">

<h4>Browsers without <code>document.implementation.createHTMLDocument</code></h4>

<p>In case of browsers that don't support <code>document.implementation.createHTMLDocument</code>, like Internet Explorer 8, the built-in sanitize function returns the HTML as is.</p>

<p>If you want to perform sanitization in this case, please specify <code>sanitizeFn</code> and use an external library like <a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>.</p>

</div>

<div class="bs-callout bs-callout-warning" id="callout-popover-disabled-options">

<p>Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code> and <code>whiteList</code> options cannot be supplied using data attributes.</p>

</div>

</tr>

<tr>

<td>sanitize</td>

<td>boolean</td>

<td>true</td>

<td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized.</td>

</tr>

<tr>

<td>whiteList</td>

<td>object</td>

<td><a href="#js-sanitizer">Default value</a></td>

<td>Object which contains allowed attributes and tags</td>

</tr>

<tr>

<td>sanitizeFn</td>

<td>null | function</td>

<td>null</td>

<td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>

</tr>

<div class="bs-callout bs-callout-warning" id="callout-tooltip-disabled-options">

<p>Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code> and <code>whiteList</code> options cannot be supplied using data attributes.</p>

</div>

<tr>

<td>sanitize</td>

<td>boolean</td>

<td>true</td>

<td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized.</td>

</tr>

<tr>

<td>whiteList</td>

<td>object</td>

<td><a href="#js-sanitizer">Default value</a></td>

<td>Object which contains allowed attributes and tags</td>

</tr>

<tr>

<td>sanitizeFn</td>

<td>null | function</td>

<td>null</td>

<td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>

</tr>

<li><a href="#js-sanitizer">Sanitizer</a></li>