Tool tips for form fields

That's great Robert - thanks for the tips !

Ha! I see what you did there (intentionally or not).... Glad I could help.

Hi Robert.  Thanks very much for the idea.  I couldn't get it to work entirely (cuts off text to right in a three-column format and doesn't accept "hint--top"), and I suppose that'll take some fine-tuning on my end.  But the tip is a very welcome one, as it certainly would not have occurred to me.  I'll look for another tooltip script that's friendly to your much appreciated solution.

I noticed that too in certain cases. It depends how deep within divs your forms are and what sort of styling is applied to them. I haven't got an answer for that just yet, but I'm looking. What I've done so far is shorten the widths of my fields on a field-by-field basis to keep them within the container they are shown.

As a follow-up, the tooltip suggested by Robert is now working perfectly on my forms (I wish I knew why it did not when I first tried it; but I deleted the Hint css,  tried out other possible solutions, decided to give this one another shot, and it now works).

I do have a related tip to pass on to others interested in using Robert's  solution (one I searched for and found within the Hint.css repository at Github).  The tooltip css as written  results in a single line of text (which should suffice in most cases).  If, however, you have extra-long hints and don't want your tooltip to span the entire form  and prefer instead to use multiple lines with a limited pixel length, look for "white-space: nowrap;" in the original css. Change that to "white-space: normal;", then add max width and min width  properties just above that. As an example, I have mine set as follows:

max-width: 150px;
min-width: 150px;
white-space: normal;

This is a really great capability. I am using it with the Jetpack plugin which enables you to use this CSS without modifying a theme file (useful because you don't have to remember to modify a file if you change themes).

Hi jnash

Creating a child theme (See Wordpress codex) allows you to do the same thing (as well as for php functions).  It's simple and, as you note, a really good idea for those who don't want to mess with the main theme--or worse, with the core of the Wordpress installation.

Hi peeps,

Could someone please paste the code that Robert Clapp first posted, as it is no longer available.

Thanks !

Updated!

Thanks ever so much will give that a try

:-)

Did you get it working admingenie?

Hi Robert, yeah got it working no problem, just does not suffice for what we need.

Have reverted to using Tippy, just seeing if I can get some custom code setup so that Tippy can be used on the radio buttons independently.

I am skilled in using HTML/CSS, and in the past worked with Java, C#, SQL etc, but Javascript, no and dont have the time to learn another language.

Cheers

My example works independently on radio buttons. Am I missing something to this request?

http://paste2.org/yfGjxZxN

Robert, thanks so much for posting these tips - super helpful. I do have a question though. Any idea why when using the hint.css the width of the input field is no longer the entire available width?

See example: the (address 1) field has a hint applied to it, while the (address 2) field does not. Notice how the width of (address 1) is much narrower.

I thought I had resolved that. I'll look at it again.

jcposada

I've updated my original tutorial once again (The quick and dirty copy and paste version from firebug). We have to add:
.with_frm_style input[type="text"], .with_frm_style input[type="password"], .with_frm_style input[type="email"], .with_frm_style input[type="number"], .with_frm_style input[type="url"], .with_frm_style input[type="tel"], .with_frm_style select, .with_frm_style textarea, .frm_form_fields_style, .with_frm_style .frm_scroll_box .frm_opt_container, .frm_form_fields_active_style, .frm_form_fields_error_style, .with_frm_style .chosen-container-multi .chosen-choices, .with_frm_style .chosen-container-single .chosen-single {
width: 550px !important;
}


Into the "before fields" content as indicated in my tutorial. Note: Change the width value as necessary.

Thanks very much Robert, works like a charm now!

Hi,

Thanks for the post! I've managed to get the tooltips to work. However as "Foreigner" mentioned earlier, I also have some particularly large tooltips to add. Thus I would like to insert / force the text onto a new line. I followed the advise:

max-width: 150px;
min-width: 150px;
white-space: normal;

But had no luck, (see attached screenshot)

Is anybody else able to advise how to achieve this?

Thanks in advance,

Matt

Is the site public facing? Can you provide a link?

The website hasn't launched yet, but yes it will be customer facing. The specific page is....

http://occdtrader.com/create-ad/

But I believe you'll need to register to see the form containing the tooltips.

Thanks,

Matt

I registered. Still unable to view it. (dgodfather)

You should have received an email with some sort of link, if you click that and then log back in it should work. Did you receive the email?

I went to the page in question after logging in. It's missing. Is it set to "private"?

Apologies, try this one... http://occdtrader.com/sell-a-car/

Below is all I see. Do I have the appropriate permissions to view the form?

Sell a Car

If you’re new to OCCD please register an account with us (using the “User Registration” form to the left). If you’re already a member, please log in using the “Login” form to your left. Users must be members to create an advert, this is to reduce the risk of spam.

Normally users are required to pay a fee to advertise a car with OCCD… However for a limited promotional period, members can advertise their cars, completely free… seize the opportunity whilst you can!

Sorry I'm having a shocker... It should be fine now!

I was hoping to troubleshoot the issue, but I do not see any problems that exist. I tested it in Firefox and MS Edge and all your tooltips look fine. Is there another place where the attachment you provided earlier shows up? What browser are you viewing with?

I'm using Chrome.

The tool tips seem to function correctly, what I am trying to do is force the text (with in the tooltip) onto another line. i.e. one of my tooltips "Does the car have upgraded or aftermarket bucket seats?" is rather long, so I would like to insert a new paragraph / line break, somehow?

If that makes any sense...

It does. I will test on my demo site and try and provide something.

You'll need to edit the hint css file and add/change:
width:150px;
white-space:normal;

To the following piece of code:

.hint:after,[data-hint]:after{content:attr(data-hint);background:#383838;color:#fff;padding:8px 10px;font-size:12px;line-height:12px;white-space:no-wrap;text-shadow:0 -1px 0 #000;box-shadow:4px 4px 8px rgba(0,0,0,.3);}

That's perfect... Exactly what I was looking for!

Thank you soo much for your help (and apologies for the chaos I've caused)!

Many, many thanks,

Matt :)

No worries. Enjoy!