Bootstrap 4.1 - buttons (prev, next...) do not appear

[ThierryNapspirit]

Using bootstrap4.1 the popover-nagivation div is always empty ! This is due to bootstrap 4.1: it removes all "button" tags from the popover content.

It is possible to enable the button by adding sanitize: false, after html:true, when the popover is initialized ($element.popover.).

Thanks for this library !

Regards. Thierry.

[IGreatlyDislikeJavascript]

Fyi this is due to a breaking change in Bootstrap that the authors of Tour have not had time to fix yet.

Although your solution (probably, for part of the BS 4 changes) works, turning off the bootstrap sanitizer directly is a potential security risk and should be last resort.

I've fixed this issue in my fork of Tour, which also fixes a number of other issues and adds full BS 3 & 4 compatibility.

You can see the detail of this sanitizer issue here: https://github.com/sorich87/bootstrap-tour/issues/723#issuecomment-471676375

And my fork is here: https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist

[andreaslillebo]

A possible workaround is to add the required elements and attributes to the default whitelist for the Bootstrap popover constructor sanitizer (before you initialize Tour).

The following works for me when using Bootstrap 4.3.1:

var whitelist = $.fn.tooltip.Constructor.DEFAULTS.whiteList;
whitelist.button = ['data-role', 'style'];
whitelist.img = ['style'];
whitelist.div = ['style'];

[IGreatlyDislikeJavascript]

@andreaslillebo yes, the cause of the missing buttons is the bootstrap sanitizer. Your proposed fix will solve the issue, however it creates a potential security vulnerability. Have a read of the comment #723 linked in my post above for the detail.

In short, making a change to the global sanitizer whitelist means you must also make sure that any other code, and all other 3rd party plugins you're using does not expose an XSS or similar flaw. That's why you should generally not change the bootstrap sanitizer default, and instead change the permitted tags in the specific popover construction. That's why I added the specific whitelist manipulation features to Tourist.

Also it's worth noting that Bootstrap Tour is not BS4 compatible. Although you can change the template and whitelist, there are several other elements that need to be changed for proper BS4 compatibility - including the creation, manipulation and destruction of the popover. BS3 uses popover, BS4 uses popper.js which is completely different. Again, my Tourist fork fixes this properly for full compatibility.