Convert your form instructions to tooltips

API & Custom Code Show & Tell
25

No worries, the thread here is a little confusing and my original reply could have included everything rather than having you jump through hoops and do a “copy/paste scavenger hunt”. So… here is the FULL code!

Just copy/paste the corresponding sections below into the “Javascript” and “CSS” pieces of your API & Code from the Builder:

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);
		}
	}	
});

CSS:

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

/* Tooltip Color Properties */
span.ttpict {color: #8B939E;}
span.ttpict:hover {color: #E8AD11;}

/* 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;
  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
  background-color: #000; 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-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;
  -webkit-animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}

Feel free to let me know if you run into any issues.

2 Likes