Buy Now
Sign in

Mandatory Tooltip even if data entered in a field?

I
itadminguy
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.
I
itadminguy
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.
healyhatman
In the "Additional attributes" section of your field you can add
data-tooltip:Your text here
Which will show up on hover.
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman