This is a text area script which generates an information icon on designated visualisation titles on load which when clicked displays a popup for more information.

Text Area HTML Code

The following code is what is to be stored within the popup box after the icon has been clicked.

<script>
function VisTitleInfo(iid,eid,visL,visW) {
    var im = document.getElementById(iid);
    var el = document.getElementById(eid);
    if (el.style.display === 'none') {
        el.style.display = "block";
        el.style.position = "fixed";
        el.style.border = "2px solid #555555";
        el.style.padding = "5px";
        el.style.fontSize = "14px";
        el.style.background = "#FFFFFF";
        el.style.borderRadius = "4px";
        el.style.top = im.getBoundingClientRect().top + parseInt(im.clientHeight) + 8 + 'px';
        el.style.left = parseInt(visL) + 8 + 'px';
        el.style.width = parseInt(visW) - 30 + 'px';
        el.style.maxHeight = "480px";
        el.style.overflowY = "auto";
    } else {
        el.style.display = 'none';
    }
}
</script>

<div id="info-icons"></div>

<div class="info-flyout" title="Visualisation Title 1">
	
</div>

<div class="info-flyout" title="Visualisation Title 2">
	
</div>

<div class="info-flyout" title="Visualisation Title 3">
	
</div>

Javascript Code

The code parses your titles from the HTML Div elements and determines where in your dashboard the visualisation titles match, when they do, the javascript generates a clickable information icon. When the icon is clicked, the popup is shown.

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 "TitleInfoFlyout" and paste the following into the script portion:

window.onload = $('.info-flyout').each(function(i, li){
	li.style.display = "none";
	li.id = "info-flyout-" + i.toString();
	$('.sf-single-line-text').each(function(v, vi){
		if(vi.title == li.title) {
			if(document.getElementById("info-icon-" + i.toString()) === null) { $("#info-icons").append("<div class='ui-icon ui-icon-help' id='info-icon-" + i.toString() + "'></div>"); }
			icon = document.getElementById("info-icon-" + i.toString());
			icon.style.display = "block";
			icon.style.position = "fixed";
			icon.style.top = vi.getBoundingClientRect().top + 'px';
			icon.style.left = vi.getBoundingClientRect().left + parseInt(vi.clientWidth) + 'px';
			icon.style.border = "1px solid black";
			icon.style.borderRadius = "8px";
			icon.style.padding = "0px";
			icon.style.textAlign = "center";
			icon.style.verticalAlign = "middle";
			icon.style.cursor = "pointer";
			icon.setAttribute("onclick","VisTitleInfo('info-icon-" + i.toString() + "','info-flyout-" + i.toString() + "','" + vi.getBoundingClientRect().left +"','" + vi.parentNode.parentElement.clientWidth + "');");
		}
	});
});