Alternative to ‘hints’ field in build form widget

Liberty Create - Build Advice
1

Is there a popup alternative to the ‘Hint’ field in Form Widget Settings which will allow you to hover over a question and it will give more detail?

My build has quite a number of long complex questions to answer, making the presentation looking quite wordy.

eg ‘Have you checked the accuracy of the claim and, where inconsistencies between the: - claim and/or the contract, and/or supporting documents, and/or inspection report, have been identified, has the amount that you are certifying for payment been reduced in line with our guidance.’

I would like to be able to make the questions short and snappy, eg ’Have you checked accuracy of Claim?' and have the ability to be able to hover over the question and present a form of popup which will give more detail of the question or further explanation of what the question is about.

Is there a way to do this other than having to create many popup pages for each question?

2

Hello there, No, but you could easily create a pop up page for each field, where you could show all the information you like, and just format the field on the page to have the pop up link to the appropriate page. It’s not “hover” but Your Hint could say “Click field for more details”.

Hope this helps. Mark

3

RIchard Kelly has a CSS that will do this. I have a copy, but he may have a more up-to-date version.

4

If you could send me the CSS that would be good, i’ll give it a try.

5

Thanks for your response, it will give it a try.

6

Can’t see a way of attaching a file to a post, so I have copied and pasted it here. Note that I didn’t get a chance to test it, and it hasn’t been through full Netcall testing either, so please treat it as development code.

/* SCSS Configuration variables */

$tt_bgcolour: Gray;

/* Tooltip text */
.tt span.help-block {
visibility: hidden;
width: 120px !important;
background-color: $tt_bgcolour;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
opacity: 0;
transition: opacity 1s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tt:hover span.help-block {
visibility: visible;
opacity: 1;
}

/* tooltop above the field /
.tt-above span.help-block {
bottom: 100%;
left: 50%;
margin-left: -60px; / Use half of the width (120/2 = 60), to center the tooltip */
}

/* Arrow on the bottom of the tooltip */
.tt-above span.help-block:after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: $tt_bgcolour transparent transparent transparent;
}

/* tooltop below the field /
.tt-below span.help-block {
top: 100%;
left: 50%;
margin-left: -60px; / Use half of the width (120/2 = 60), to center the tooltip */
}

/* Arrow on the top of the tooltip */
.tt-below span.help-block:after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent $tt_bgcolour transparent;
}

/* Tooltip to left of element */
.tt-left span.help-block {
top: -5px;
right: 100%;
}

/* Arrow to right of the tooltip /
.tt-left span.help-block:after {
content: " ";
position: absolute;
top: 50%;
left: 100%; / To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent $tt_bgcolour;
}

/* Tooltip to right of element */
.tt-right span.help-block {
top: -10px;
left: 100%;
}

/* Arrow to left of the tooltip /
.tt-right span.help-block:after {
content: " ";
position: absolute;
top: 50%;
right: 100%; / To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent $tt_bgcolour transparent transparent;
}

/* Prevent display of the information icon on tool tips */

.tt-noicon .icon-info:before {
content: “” !important;
// Default setting is
// content: “\e08b”;
// You could use any code from https://simplelineicons.github.io/
}

1 Like
7

Not updated it since I sent this version, but any problems give me a shout. I did document it all (which should appear on the appshare eventually), so add a “tt” class to your fragment and a tt-left or one of the other directional classes. I do recall I tried to use “tooltip” as a class name, but that conflicted with something in bootstrap and made fragments vanish!

8

Love this Richard, thank you! #pinched

9

Just used it, brilliant!
Best part is you can place the tooltip in any corner of the field… left, right, above etc, thanks Richard.

Just noticed that the code pasted above seems to miss few Asterisks ‘*’ in comments. That needed fixing when copied and pasted into code studio.