Tooltips for ws form

[Tim Littley]

Tooltips (and popovers) are an invaluable way to help users understand what is being asked. I have that if used judiciously in forms they can substantially lower the amount of question and support that is needed and make for a better user experience. Tooltips are must-have when using forms for any kind of project at scale.

One of the better implementations of tooltips (that I am aware of) is tippy.js (https://atomiks.github.io/tippyjs/). It has all the flexibility and customization options you would likely ever need and is easy to implement.

I will open an enhancement request to add tooltips to ws form. But in the meantime…in the spirit of giving back, attached is the code I have written to add tooltips to any field in ws form. The basis of which is gridification of all form fields (CSS grid is awesome).

It looks like this:

Quick how-to

– Add tippy.js libraries to page
– Add Awesome Font code library kit to page, with whatever tooltip icon you want to use (I am using fa-question-circle)
– Add JS and CSS below to page (I use Oxygen Builder so it’s a simple code-block for me)
– Add the “tippy” class to the Field Wrapper of any form-field that needs a tooltip (in ws forms)
– Add tippy content prop to the JS below for each form-field that needs a tooltip, this is where you can customize the look and feel of your tooltip to hearts content
– Both icon and tooltip look and feel are completely up to you 🙂

Javascript as follows:

(function ($) {

    $(document).on('wsf-rendered', function (e, form, form_id, instance_id) {

        //Add the "tippy" class to the field wrapper of any field that needs a tooltip
        let wsTips = document.querySelectorAll(".tippy");

        wsTips.forEach((e) => {
            let tippyID = "tooltip" + e.getAttribute("data-id");

            //Introduce tooltip icon for the (unconventional) password field
            if (e.contains(document.querySelector(".wsf-input-group"))) {

                let wsGroup = document.querySelector(".wsf-input-group");
                let wsGroupAll = document.querySelectorAll(".wsf-input-group");
                let wsAppend = document.querySelector(".wsf-input-group-append")
                let wsToggle = document.querySelector("[data-wsf-password-visibility-toggle]")
                let wsSVG = wsToggle.firstElementChild;

                //Ascertain width of the group-append element
                let appMR = parseFloat(window.getComputedStyle(wsAppend, null).getPropertyValue('padding-left'));
                let appML = parseFloat(window.getComputedStyle(wsAppend, null).getPropertyValue('padding-right'));
                let appBR = parseFloat(window.getComputedStyle(wsAppend, null).getPropertyValue('border-right-width'));
                let svgWidth = parseFloat(window.getComputedStyle(wsSVG, null).getPropertyValue('width'));
                let eyeWidth = appMR + appML + appBR + svgWidth

                //If using form in *only* in non-modal context this should work instead
                //let eyeWidth = document.querySelector(".wsf-input-group-append").offsetWidth;
                //console.log(eyeWidth);

                //Apply group-append element width to grid(s)
                wsGroupAll.forEach((e) => {
                    e.style.setProperty("--ew", eyeWidth);
                });

                //Note: Custom icon is provided byFont Awesome libray kit
                let iconElement = document.createElement("i");
                iconElement.className = tippyID + " grouptip far fa-question-circle";
                wsGroup.prepend(iconElement);
            } else {
                //Introduce tooltip icon for all other fields
                let iconElement = document.createElement('i');
                iconElement.className = tippyID + " tooltip far fa-question-circle";
                e.append(iconElement);
            }
        });

        //Customize your tooltip for each icon using props (see tippy.js)
        //Each icon is identified by class label formatted as "tooltip+fieldID"
        //Examples as follows:
        tippy('.tooltip47', {
            content: 'Enter your user name here!',
            placement: 'right',
            inertia: true,
        });

        tippy('.tooltip48', {
            content: 'Enter Password',
            placement: 'right',
            hideOnClick: true,
        });

        tippy('.tooltip96', {
            content: 
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis sed mi bibendum, semper diam in, laoreet ante. Quisque at rutrum lectus.
Praesent semper mauris eget enim placerat volutpat.
Vestibulum sollicitudin orci dapibus vulputate malesuada.
Praesent euismod sit amet sem eget laoreet.',
placement: 'right',
InteractiveDebounce: 75,
maxWidth: 200,
});

tippy('.tooltip98', {
content: 'Enter a comment here!!',
placement: 'top',
arrow: false,
});

});

})(jQuery);

<ul>CSS as follows:</ul>

.grouptip,
.tooltip {
margin: 0 0 0 1vmin;
}

.grouptip {
grid-area: grouptip
}

.tooltip {
grid-area: tooltip
}

.wsf-field {
grid-area: field
}

.wsf-field-wrapper {
display: grid;
grid-template-areas:
"label ."
"field tooltip"
"feedback ."
"helptxt .";
grid-template-columns: 100%
}

.wsf-input-group {
grid-area: field;
display: grid;
grid-template-areas:
"field eye grouptip"
"feedback . ."
"helptxt . . ";
grid-template-columns: calc(100% - var(--ew) * 1px) 1fr
}

.wsf-field-wrapper>.tooltip,
.wsf-input-group>.grouptip {
align-self: center
}

.wsf-invalid-feedback {
grid-area: feedback
}

.wsf-help {
grid-area: helptxt
}

.dropzone,
.minicolors,
.wsf-field-wrapper>canvas,
.wsf-progress,
.wsf-rating {
grid-area: field
}

.dropzone~.tooltip {
align-self: start
}

.wsf-input-group-append {
grid-area: eye
}

/*Apologize for this, !important was already present in original CSS*/
.wsf-input-group>.wsf-field {
width: auto !important;
grid-area: field
}

/*Difficult to reach elements, no selectors to latch on to*/
[data-type=checkbox]>div:nth-child(1),
[data-type=checkbox]>div:nth-child(2),
[data-type=googlemap]>div:nth-child(3),
[data-type=price_checkbox]>div:nth-child(1),
[data-type=price_checkbox]>div:nth-child(2),
[data-type=price_radio]>div:nth-child(1),
[data-type=price_radio]>div:nth-child(2),
[data-type=radio]>div:nth-child(1),
[data-type=radio]>div:nth-child(2) {
grid-area: field
}

[data-text-editor]~.tooltip,
[data-type=checkbox]>.tooltip,
[data-type=googlemap]>.tooltip,
[data-type=legal]>.tooltip,
[data-type=price_checkbox]>.tooltip,
[data-type=price_radio]>.tooltip,
[data-type=radio]>.tooltip,
[data-type=signature]>.tooltip,
[data-type=textarea]>.tooltip {
align-self: start
}

[data-text-editor] {
grid-area: field
}

Cheers,

–Tim

[Author]

Posts