Help popup

From Sohowiki
Jump to: navigation, search

Within the Soholaunch product architecture there is a php function called help_popup. It standardizes the creation of popup layers that can be used to include help text or even config options.


How to create a help popup within you plugin's php code

Basic Syntax

help_popup("popup-id-name", "title text", "My html content" [,additional inline css] [,other array]);

Quick Example

$popupHTML = "<p>This is my help pop-up. It explains stuff.</p>";
$popupHTML .= "<p>And also explains some other stuff.</p>";

echo help_popup("pophelp-explain-stuff", "My Help Popup Explains Stuff", $popupHTML, "top: 10%;");

<span class="help_link" onclick="showid('pophelp-explain-stuff');">[?] Launch help popup</span>

HTML Explained

The example above includes some html code to launch the popup layer.

<span class="help_link" onlick="showid('pophelp-explain-stuff');">[?] Launch help popup</span>

Here are some things to remember about that...

This is a special css class available globally in Soholaunch. You should use it on any help link. Traditionally this will give your link the standard "help orange" formatting and ensure that if the global style for such links changes in the future your link will stay current.
This is a javascript function also available globally throughout the Soholaunch code (because it is included in js_functions.php as well as site_javascript.php). All it does is toggle the visibility of a layer. It has a sister function, hideid() which "closes" (hides) the layer).

The Other Array

The help_popup() function accepts as an optional fifth argument an array of special data. Currently this is only used in one respect: the 'onclose' element.


If you pass that fifth argument as an array with a key named 'other' whose value is a line of javascript, that javascript will be executed when the close bar of the help popup is clicked.

The primary purpose of this is re-showing drop-downboxes that you hid when opening the popup (to account for them poking through the popup layer because of IE's infinite z-index but).

Anyhow, here's how to do it...

$popupHTML = "<p>This is my help pop-up. It explains stuff.</p>"
$popupHTML .= "<p>And also explains some other stuff.</p>";

$otherArr = array();
$otherArr['onclose'] = "showid('id-of-dropdown');";

echo help_popup("pophelp-explain-stuff", "My Help Popup Explains Stuff", %popupHTML, "top: 10%;", $otherArr);

<span class="help_link" onlick="hideid('id-of-dropdown');showid('pophelp-explain-stuff');">[?] Launch help popup</span>

Naming conventions

Generally, we have a convention for prefixing the id name of the popup layer.

Preferred ID name prefixes...

Use for most help popups, if it contains purely information.
Use if popup contains config form.

We may eventually use these to further style the popup. For example, we may add a question mark watermark for help popups and a gear watermark for configuration popups. And right now the only way to tell these apart is with this prefix naming convention. So use it.


  • You can use it anywhere. The help_popup() function is included in shared_functions.php and is therefore available globally in both the Soholaunch admin tool window as well as on the client (website) side.
  • Position it. Use the inline style argument when you call the function to control the top/left positioning.
Personal tools