I used popperJS to add a popover box when the user focuses on the password field. This is an Azure AD B2C page customisation. I can see the box element is there but it's not displaying. Any help is highly appreciated, thank you!
I can see the popover box is on the page
if (window.jQuery) {
(function ($) {
$(document).ready(function () {
const passwordField = document.querySelector('input[id=newPassword]');
passwordField.removeAttribute('title');
passwordField.addEventListener('focus', () => {
$('#newPassword').popover({
trigger: 'focus',
container: 'body',
html: true,
content: '<p>And here some amazing content. It is very engaging. Right?</p><p>TEST Test</p><p>TEST Test</p><p>TEST Test</p>',
placement: 'right'
});
});
});
}(window.jQuery));
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<input id="newPassword" class="textInput" type="password" placeholder="New Password" aria-label="New Password" aria-required="true">The issue was with the version of bootstrap.min.js. Azure AD B2C theme use bootstrap.min.css version 3.3.5 and it doesn't work with bootstrap.min.js of higher version. This resulted in the .fade class doesn't work properly and the opacity being set to 0.
Check your Azure AD B2C theme custom HTML and make sure there's no crash in the versions of bootstrap assets.