Skip to main content

IMPORTANT - Product End of Life Statement - IMPORTANT

Request RE, Survey, and Calendar 1.5 Support Ending December 31, 2020
Contact Kinetic Data Support with Questions
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.