Forums

I have a field to enter soc. sec. no. that purposely does not have a label. Just a placeholder that says "enter ssn".
​
I created one of the masks provided from cf5 for a soc sec no that only shows the last four digits as ***-**-1234
​
Field one is hidden so you cant see the numbers that are being typedg in. Field two displays the ***-**-1234 as you finish typing.
​
There is a cf5 post on how to do this. JS and css.
​
Without any data in field one, the placeholder and the tool tip displays the purpose of the field.
​
The problem is that once data is entered, the tooltip disappears. And I don't want a label for field one or two.
​
When there are no typed numbers in the field one, the placeholder and the tooltip states "enter ssn". When numbers are entered, the placeholder disappears. The tooltip is also now gone.
​
Is there any way to keep the tooltip so that if you enter numbers and then hover over the "hidden" field one which per the css does not show numbers (even though the numbers are in the field as 1231231234) that the tooltip will still show the purpose of field one?
​
Basically to allow the tooltip to always act as a label with or without data in the field?
​
Thanks in advance.

FYI Here is how the above was created.
​
*****************
​
For CF5 both the JS and the CSS are in the on load section.
​
For CF6 both the JS and the CSS are in the designer.
​
Field one is called applicant_ssn
​
Field two is called ssn_entry
​
**********************
​
JS
---
jQuery(document).ready(function(jQ){
jQ('#applicant_ssn').on('keyup', function() {
var el, res, len, stars, result, error;
error = false;
el = jQ(this);
// get the current value
res = el.val();
// strip out any non-digit characters
if ( jQ.isNumeric(parseInt(res)) ) {
res = parseInt(res);
} else {
res = '';
}
// check if the last character was valid
if ( res != el.val() ) {
error = true;
}
// get the current length
len = res.toString().length;
// limit to 9 digits
if ( len > 9 ) {
len = 9;
res = res.toString().substring(0, 9);
error = true;
}
// show the edited value
if ( error ) {
// show an error
el.css('border-color', '#f5f5f5');
} else {
// all OK
el.css('border-color', 'silver');
}
el.val(res);
// set mask for display
if ( len > 3 ) {
len += 1;
}
if ( len > 5 ) {
len += 1;
}
stars = '***-**-'.substring(0, len);
result = stars + res.toString().substring(5);
jQ('#ss_entry').val(result);
});
});
​
​
css
---
​
/* set the entry font color */
#applicant_ssn{
color: transparent !important;
}
#ssn_entry{
background-color: #f5f5f5 !important;
}
/* hide the label of second input */
label[for=ssn_entry] {
display: none;
}

*****************
​
(FYI, not posted above, I also modified the below for phone numbers with
the first of the 11 digits, so it allows for 10 digits only without
neededing the first 1(xxx)xxx-xxxx) which the phone mask in CF6 requires
the first of the 11 digits.

In the "Additional attributes" section of your field you can add

data-tooltip:Your text here

Which will show up on hover.