Hi, this works great. However, it is not mobile compatible. Is there an additional code to resize for mobile devices?
Hi Stevan
This is great. Could you please help me to highlight which part of the code I need to change in order it to work for my App? I cannot seem to find the page number?
Thanks,
Stevan - awesome as usual!
Hi,
I was directed to your thread by the Knack help. Perhaps they thought I had some coding skills? I have tried to follow the thread - pasting the first section into the Javascript, and the rest, including the additional few lines here into the CSS. Not sure what that all means, but doesn’t make a difference when I run the page/form. I restarted the App, but no changes. For a total beginner can you walk me through the cut and paste?
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
Thanks so much. Working as described.
Hi Robert.
Great job! One extra feature I’d love though (but can’t work out how to implement) … my Instruction fields contain HTML directives, especially
to force newlines. This works in Instructions, but the actual HTML shows in the tooltip rather than it being processed.
What needs to change to process the HTML directives?
@DeeGee,
That’s an interesting question. Using the CSS provided by the original poster, I had a hard time because the tooltip’s text was coming from the a CSS attr() which only accepts strings. But I managed to rewrite the CSS from scratch (I’m not a CSS guy so this was an adventure) and made it work. Now the tooltips can accept HTML tagging/injection from the Builder!
Here is a rewrite of the Javascript and CSS that allows for HTML tagging from the instruction field within the Builder. It looks a little different aesthetically but you can do any HTML injection from the builder that you like including <br> to break the line.
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 += '<div class="tooltip"> <i class="fa fa-question-circle" style="padding:0 .25em; font-size: 1.1em"</i> <span class="tooltiptext"> </span></div>';
input.getElementsByClassName('tooltiptext')[0].innerHTML = instruction.innerHTML;
}
}
});
CSS:
/**************/
/* Tool Tips */
/************/
/* Hides Instruction Fields (Because They Are Converted to ToolTips */
.kn-instructions {display: none;}
/* Tooltip Properties */
.tooltip {color: #8B939E; position: relative; display: inline-block}
.tooltip:hover {color: #E8AD11;}
/* Tooltip Container Properties */
.tooltip .tooltiptext {
position: absolute; bottom: 110%; left: 50px; margin-bottom: 5px; margin-left: -50px; padding: 7px; width: max-content; /* Adjust Width as Needed, if your tooltips are super long then set a maximum width */
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: #000; color: #fff; text-align: left;
font-size: 14px; font-weight: normal; line-height: 1.2; z-index:99999;
visibility: hidden;
}
/* Tooltip Arrow Properties */
.tooltip .tooltiptext::after {
content: ""; position: absolute;
top: 100%; left: 10px; margin-left: -5px;
width: 0; line-height: 0;
border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;
}
/* Show Tooltip Text On Hover */
.tooltip:hover .tooltiptext {
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;
}
1 Like
That’s great, thanks!
I noticed when you have a two column form, the tooltip displays behind the fields in the second column if they are too long. I fixed this by adding a z-index: 99999 to the main tooltip properties. The change is shown below.
/* Tooltip Properties */
.tooltip {color: #8B939E; position: relative; display: inline-block; z-index: 99999;}
Thank you Robert, working fine. However in the pop up window this is not working! Any idea?