// Function to show and hide the balloon popover function viewBalloon(instance) { // Get the modal element let modal = $('#signature_modal_dialog'); // Initialize the popover for the instance element // Initialize the popover for the instance element $(instance).popover({ // Set the container for the popover to the modal element container: modal, // Set the placement of the popover to 'bottom' placement: 'bottom', // Set the trigger for the popover to 'manual' trigger: 'manual', // Set the boundary for detecting overflow to 'window' boundary: 'window' }); // Set the content of the popover to the text content of the element with id "id_help_text" $(instance).attr("data-content", document.getElementById("id_help_text").textContent); // Update the popover $(instance).popover('update'); // Show the popover $(instance).popover('show'); // Define a function to handle clicks on the modal function handleClick(e) { // Check if the click target is not the button that opened the popover or any of its children if (e.target !== instance && !$(instance).has(e.target).length) { // Hide the popover $(instance).popover('hide'); // Remove the click event listener from the modal $(modal).off('click', handleClick); // Remove the click event listener from the button that opened the popover $(instance).off('click', handleCloseButtonClick); } } // Add a click event listener to the modal to handle clicks on it $(modal).on('click', handleClick); // Define a function to handle clicks on the button that opened the popover function handleCloseButtonClick(e) { // Hide the popover $(instance).popover('hide'); // Remove the click event listener from the modal $(modal).off('click', handleClick); // Remove the click event listener from the button that opened the popover $(instance).off('click', handleCloseButtonClick); } // Add a click event listener to the button that opened the popover to handle clicks on it $(instance).on('click', handleCloseButtonClick); // Set CSS variables for popover background and arrow color to match header background color document.documentElement.style.setProperty('--popover-bg-color', document.getElementById("skypdf__signature--div-header").style.backgroundColor); document.documentElement.style.setProperty('--popover-arrow-color', document.getElementById("skypdf__signature--div-header").style.backgroundColor); // Add class 'popover-danger' to popover element for styling purposes $('#balloon').next('.popover').addClass('popover-danger'); }