An information popup box that can be used within a textarea (HTML).

Text Area HTML

Paste the following template into your text area editor in HTML mode

<script>
function ShowHideInfo(eIcon,ePanel) {
    var im = document.getElementById(eIcon);
    var el = document.getElementById(ePanel);
    if (el.style.display === 'none') {
        el.style.display = 'block';
        if ( im.getBoundingClientRect().left >= parseInt(window.screen.width/2) ) {
            el.style.right = (window.screen.width - im.getBoundingClientRect().left + 5) + 'px';
        } else {
            el.style.left = (im.getBoundingClientRect().left + parseInt(im.style.width) + 5) + 'px'; 
        }
        if ( im.getBoundingClientRect().top >= parseInt(window.screen.height/2) ) {
            el.style.bottom = (window.screen.height - im.getBoundingClientRect().bottom - parseInt(im.style.height) - 14) + 'px';
        } else {
            el.style.top = im.getBoundingClientRect().top + 'px';
        }
    } else {
        el.style.display = 'none';
    }
}
</script>

<div class="info-popup-icon"></div>

<div class="info-popup-panel">
	<h2>Heading</h2>
	Info here!
</div>

Javascript Code

Add this to the text area javascript library, by clicking on the javascipt button on the editor

If adding this code for the first time, click "New"

Name the script "InfoPopup" and paste the following into the script portion:

window.onload = $('.info-popup-icon').each(function(i,li) {
	li.id = "info-popup-icon-" + i.toString();
	li.innerHTML = "<div class='ui-icon ui-icon-help' id='info-icon-" + i.toString() + "' style='transform: scale(2); margin: 5px auto 5px auto;'></div>";
	li.style.border = "2px solid gray";
    li.style.borderRadius = "8px";
	li.style.padding = "0px";
	li.style.margin = "0px";
	li.style.textAlign = "center";
	li.style.verticalAlign = "middle";
	li.style.cursor = "pointer";
	li.style.width = "24px";
	li.style.height = "28px";
	li.setAttribute("onclick","ShowHideInfo('info-popup-icon-" + i.toString() + "','info-popup-panel-" + i.toString() + "');");
});

window.onload = $('.info-popup-panel').each(function(i,li) {
	li.id = "info-popup-panel-" + i.toString();
	li.style.width = "860px";
	li.style.fontSize = "13px";
	li.style.lineHeight = "20px";
	li.style.background = "white";
	li.style.color = "black";
	li.style.display = "none";
	li.style.position = "fixed";
	li.style.border = "2px solid gray";
	li.style.borderRadius = "6px";
	li.style.padding = "0px 10px 10px 10px";
	li.style.zIndex = "1";
	li.setAttribute("onmouseleave","ShowHideInfo('info-popup-icon-" + i.toString() + "','info-popup-panel-" + i.toString() + "');");
});

Sources

  • No labels