document.addEventListener("DOMContentLoaded", function() { // Create the SVG element var infoIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); infoIconSvg.setAttribute("class", "info-icon"); infoIconSvg.setAttribute("id", "infoIcon"); infoIconSvg.setAttribute("width", "24"); infoIconSvg.setAttribute("height", "24"); infoIconSvg.setAttribute("viewBox", "0 0 24 24"); infoIconSvg.setAttribute("fill", "none"); infoIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); var svgGroup = document.createElementNS("http://www.w3.org/2000/svg", "g"); svgGroup.setAttribute("clip-path", "url(#clip0_8268_2524)"); var outerCirclePath = document.createElementNS("http://www.w3.org/2000/svg", "path"); outerCirclePath.setAttribute("d", "M12 0C5.36761 0 0 5.367 0 12C0 18.6323 5.367 24 12 24C18.6324 24 24 18.633 24 12C24 5.3677 18.633 0 12 0ZM12 22.3256C6.30647 22.3256 1.67442 17.6936 1.67442 12C1.67442 6.30642 6.30647 1.67442 12 1.67442C17.6935 1.67442 22.3256 6.30642 22.3256 12C22.3256 17.6936 17.6935 22.3256 12 22.3256Z"); outerCirclePath.setAttribute("fill", "#186F9F"); var infoLinePath = document.createElementNS("http://www.w3.org/2000/svg", "path"); infoLinePath.setAttribute("d", "M11.9995 10.003C11.2887 10.003 10.7832 10.3032 10.7832 10.7454V16.7635C10.7832 17.1427 11.2887 17.5217 11.9995 17.5217C12.6787 17.5217 13.2315 17.1427 13.2315 16.7635V10.7453C13.2315 10.3031 12.6787 10.003 11.9995 10.003Z"); infoLinePath.setAttribute("fill", "#186F9F"); var infoDotPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); infoDotPath.setAttribute("d", "M12.0003 6.29102C11.2737 6.29102 10.7051 6.81227 10.7051 7.4125C10.7051 8.01278 11.2737 8.54983 12.0003 8.54983C12.7111 8.54983 13.2798 8.01278 13.2798 7.4125C13.2798 6.81227 12.711 6.29102 12.0003 6.29102Z"); infoDotPath.setAttribute("fill", "#186F9F"); var svgDefs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); var svgClipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"); svgClipPath.setAttribute("id", "clip0_8268_2524"); var svgRect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); svgRect.setAttribute("width", "24"); svgRect.setAttribute("height", "24"); svgRect.setAttribute("fill", "white"); svgClipPath.appendChild(svgRect); svgDefs.appendChild(svgClipPath); svgGroup.appendChild(outerCirclePath); svgGroup.appendChild(infoLinePath); svgGroup.appendChild(infoDotPath); infoIconSvg.appendChild(svgGroup); infoIconSvg.appendChild(svgDefs); // Create the new span element var infoPopupSpan = document.createElement("span"); infoPopupSpan.className = "info-popup"; infoPopupSpan.id = "infoPopup"; infoPopupSpan.textContent = "Jeżeli nie posiadasz numeru wykonywania zawodu wpisz swój numer dyplomu"; // Find the container with the class elementor-field-group-nrzawodu var targetContainer = document.querySelector(".elementor-field-group-nrzawodu"); // Append the SVG and span elements to the container if (targetContainer) { targetContainer.appendChild(infoIconSvg); targetContainer.appendChild(infoPopupSpan); } else { console.error("Container with class 'elementor-field-group-nrzawodu' not found."); } var infoIconMain = document.querySelector('.kontaktmain #infoIcon'); var infoPopupMain = document.querySelector('.kontaktmain #infoPopup') infoIconMain.addEventListener("mouseenter", function() { infoPopupMain.style.display = "block"; setTimeout(function() { infoPopupMain.style.opacity = "1"; }, 10); // small delay to ensure the transition effect works }); infoIconMain.addEventListener("mouseleave", function() { infoPopupMain.style.opacity = "0"; setTimeout(function() { infoPopupMain.style.display = "none"; }, 300); // matches the transition duration }); });