Skip to main content
Kinetic Community

Adding Helper Text to Questions in Request (CE) Core Edition

This article outlines how to add help text / hover text / tooltips to form elements.

Goal

Add Help / Tooltip text to form questions in Kinetic Request CE to enable better self service

First Step

This article assumes your bundle already includes the bootstrap responsive CSS / JS libraries. All bundles provided by Kinetic Data include these libraries by default.

Begin by adding the following javascript code to your bundle. This code should be placed in a javascript file that is loaded with the form.jsp page OR within each forms Custom Head Content area surrounded by <script> tags.

bundle.config.ready = function() {
    // Help Text Setup (Popover / Bootstrap)
    $('div[help-text]').each(function(){
        var hlptxt = $(this).attr('help-text')
        $(this).children('label').first().append("&nbsp;&nbsp;", $("<i class='fa fa-info-circle fa-1x' aria-hidden='true' tabindex='0' data-toggle='popover' data-trigger='hover' title='Help' role='button'></i>").attr('data-content', hlptxt));
    });
    $('[data-toggle="popover"]').popover()
});

Second Step

Next, for each question you would like to add help text (tooltip) to add a Render Attribute called "help-text" with a value of whatever you would like the help text to be.