Help popup

This is a easy little thing to implement. Insert small helping icons in the GUI and when users click them, a popup is shown with a custom text. The texts are maintained in a list on the site. The text is fetched using ajax, so no serverside-code is required

 
Popup in action
 
Step 1: Add a custom list "Text" to the root of the site. Add a text field "Value" to the list
 

Step 2: Add javascript (jQuery is required):
var collListItem;
function openHelp(obj, textid) {
    $('span[id^="Popup"]').removeClass('show');
    if ($('#Popup' + textid).length == 0) {
        var clientContext = new SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle('Text');
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'Title\'/><Value Type=\'Text\'>' + textid + '</Value></Eq></Where></Query><RowLimit>1</RowLimit></View>');
        this.collListItem = oList.getItems(camlQuery);
        clientContext.load(collListItem);
        clientContext.load(collListItem, 'Include(Value)');
        clientContext.executeQueryAsync(Function.createDelegate(this, function () { onHelpSucceeded(obj, textid); }), Function.createDelegate(this, this.onHelpFailed));
    } else
        $('#Popup' + textid).toggleClass("show");
}

function onHelpSucceeded(obj, textid) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    if (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        $('<div class="popup"><span class="popuptext show" id="Popup' + textid + '" onclick="$(this).removeClass(\'show\');">' + oListItem.get_item('Value') + '</span></div>').insertBefore($(obj));
    }
}

function onHelpFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Step 3: Add styling:
.popup {position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.popup .popuptext {font-size:11px; visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 4px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -72px;margin-bottom:15px}
.popup .popuptext::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}
.popup .show {visibility: visible;-webkit-animation: fadeIn 1s; animation: fadeIn 1s;}
@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;} }
@keyframes fadeIn {from {opacity: 0;} to {opacity:1 ;}}

Step 4: Add the following html code where you want the icon:
<img src="/_layouts/15/1030/images/ewr051.png" style="cursor:pointer" onclick="openHelp(this,'##KEY##');" border="0" title="Show help"/>
Replace the ##KEY## with a unique value

Step 5: Add a list item to "Text". Use Title-field for the key and Value-field for the help text

Thanks to w3schools for the popup-code

Sidst opdateret: 23. aug.  2017

Submenu