Convert your form instructions to tooltips

API & Customization Show & Tell
1

The following snippets do the following in your forms:

- Where an instruction is given => inserts a question mark image after the label

- on hover the question mark display the field instruction as a tooltip.

   

$(document).on('knack-scene-render.any', function(event,page) {  
  $('.kn-input').each( function () {
    var tttx = $(this).find('p').text();
    if (tttx ==="") {}
    else {
      $(this).find('.kn-input-label').css('position','relative');
      $(this).find('label > span.kn-input-label').append('<span class="ttpict"><img class="ttpict" style="padding-left:3px ; margin-bottom: -3px" src="/*your image url here*/"</img></span>');
      $(this).find('.ttpict').attr('data-tooltip', tttx);
      $(this).find('p').css('display', 'none'); 
    }
  });
  });

     

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */

[data-tooltip]:before {

position: absolute;

bottom: 110%;

left: 50px;

margin-bottom: 5px;

margin-left: -50px;

padding: 7px;

width: 225px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

/background-color: #000;/

background-color: rgba(106,168,79,1);

color: #fff;

content: attr(data-tooltip);

text-align: left;

font-size: 14px;

font-weight: normal;

line-height: 1.2;

z-index:99999;

}


/* Triangle hack to make tooltip look like a speech bubble */

[data-tooltip]:after {

position: absolute;

bottom: 110%;

left: 20px;

margin-left: -5px;

width: 0;

border-top: 5px solid #000;

border-top: 5px solid rgba(106,168,79,1);

border-right: 5px solid transparent;

border-left: 5px solid transparent;

content: " ";

font-size: 0;

line-height: 0;

z-index:99999;

}


/* Show tooltip content on hover */

[data-tooltip]:hover:before,

[data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after  {

visibility: visible;

-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;

filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);

opacity: 1;

}

  demo  here

2 Likes
2

I have the code workign fine has been for months just not in the search forms

3

I was referring to the piece that will make it work in Search Forms

4

8893612827

I posted the code in my comment here. Look for my comment from June 17, 2020 18:13.

5

Robert Hill 

Could you post the code so I can see what you did exactly. Thank you.

6

If you have some problems with display of this tooltips, try to change

$(document).on('knack-scene-render.any', function (event, scene)

to 
$(document).on('knack-page-render.any', function(event, page)

7

8893612827

Good catch! I just added a fix for that to my comment above yours. I updated the Javascript so it searches for the "Instructions" on ALL forms including Search Forms.

For those curious, the original JavaScript started it's search from "kn-input" and looked inside that DOM tree for "p.kn-instructions". This works on all forms except for Search. On the Search Form, there is no "kn-input" and the instructions are stored in "span.kn-instructions". So I cleaned up the code by beginning the search with "control" (which applies to all input type fields) and searched for "kn-instructions" from there. 

Hope that helps! 

8

This code works great except if the field is on a search form. Anybody else have this issue or know the fix?

9

This is amazing. Thank you!

I made three enhancements to the JavaScript. Removed the redundant else condition in the loop, removed the line which makes the .kn-instructions display none, and expanded the code to convert ALL instructions (not just most of them).

Tested and haven't seen any issues. Here's the Javascript:

$(document).on('knack-scene-render.any', function (event, scene) {
	// Convert Instruction to Tooltips
	// Instructions Fields Converted to Tooltips (Refer to CSS Page for Styling Tooltips)						
	let inputs = document.getElementsByClassName('control');
	let i = 0, l = inputs.length;
	for (i; i < l; i++) {
		let input = inputs[i];
		let instruction = input.getElementsByClassName('kn-instructions')[0];
		if (instruction && instruction.innerHTML != "") {
			input.getElementsByClassName('kn-label')[0].style.position = "relative";
			input.getElementsByClassName('label kn-label')[0].innerHTML += '<span class="ttpict"> <i class="fa fa-question-circle" style="padding:0 .25em; font-size: 1.1em"</i> </span>';
			input.getElementsByClassName('ttpict')[0].setAttribute('data-tooltip', instruction.innerHTML);
		}
	}	
});

Next add ALL of the CSS from the original post PLUS this CSS here to hide the instructions before the scene loads:

/* Hides Instruction Fields (Because They Are Converted to ToolTips */
.kn-instructions {display: none;}

Note: I'm not sure why width was explicitly declared to "256px" in the "before" piece of the original post's CSS. I deleted the width parameter entirely from there. Now my tool tips dynamically resize based on the length of instructions, text-wrap when needed, and fit the width of my modal windows no matter how long.

10

It would be great if tooltips could also be shown when viewing the record, not just editing it.

Does anybody have any ideas? 

 

For example: 

When viewing the "Car" record, the labels would have tooltips too, same as when editing the record:

Make (?)

Model (?)

 

The problem is there aren't "Instructions" when viewing Details of a record, and this implementation of tooltip is dependent on form instructions.

Does anybody have ideas?

11

To replace the "?" image with an icon (which looks cleaner) do this:

 

REPLACE:

<img class="ttpict" style="padding-left:3px ; margin-bottom: -3px" src="https://s3.amazonaws.com/assets.knackhq.com/assets/531749e601160ae91250edfe/5707c1ec189cba1b16698e4b/original/questionvert15px.png"</img>

 

WITH:

<i class="fa fa-question-circle" style="padding-left:3px ; margin-bottom: -3px" </i>

 

Great code. Thanks for sharing!

12

You could also try: $(document).on('knack-modal-render.any', function(event,page)   

 

 

13

I've noticed this code doesn't work in a modal popup, anyone having the same problem or solved this one?

 

EDIT:  if you replace the .one('knack... with .on('knack... it worked for me. I pasted the first line of the code I modified below.

$(document).on('knack-scene-render.any', function(event,page) {  

14

Really great piece of code but be warned it doesn't look right on mobile as the "?" images blow up and pixelate.

15

This is really great, thanks Matt.

Wondering if anyone knows how to get this to work on modal popups? I've tried changed the listener to 'knack-modal-render' as I've seen in some other posts, but that doesn't seem to work.

Thanks!

16

Thanks Matt. I had missed this one since the new theme. 

17

It looks like the original code may be out of date. I modified it a bit and appears to be stable... You enter this part in the Javascript section, the rest of the original code above goes in the CSS section.

Couple notes:

  • Had to use one() instead of on() function, otherwise editing a inline table would cause it to keep adding more balloons
  • kn-input-label is just kn-label now
  • For the append, had to use label > span:not([class]) for the append element. Without the not([class]), it was adding a duplicate balloon if there was a red required asterisk
  • Instead of looking for just p, had to use p.kn-instructions, otherwise it'd capture text inside a comment box 
$(document).one('knack-scene-render.any', function(event,page) {  
  $('.kn-input').each( function () {
    var tttx = $(this).find('p.kn-instructions').text();
    if (tttx ==="") {}
    else {
      $(this).find('.kn-label').css('position','relative');
      $(this).find('label > span:not([class])').append('<span class="ttpict"><img class="ttpict" style="padding-left:3px ; margin-bottom: -3px" src="https://s3.amazonaws.com/assets.knackhq.com/assets/531749e601160ae91250edfe/5707c1ec189cba1b16698e4b/original/questionvert15px.png"</img></span>');
      $(this).find('.ttpict').attr('data-tooltip', tttx);
      $(this).find('p.kn-instructions').css('display', 'none'); 
    }
  });
  });
18

Hi there. 

 

I would love to do this but I've tried copying and pasting the code (first part Javascript, 2nd part CSS?) and although it hides the instructions, it does not show any tooltip icon or anything else. I'm obviously missing something - can you help me out?

Thanks!

19

Nice!

20

Hi Stevan,  I'm trying to substitute "kn-subtitle" for  

'label > span.kn-input-label'

No luck as of yet.
Do you have any tips? No pun intended.