Not wotking with input tags

Question

Not wotking with input tags

baibav opened this issue 10 years ago · comments

I wanted to use this on my website's registration form and want tooltip to display onfocus in input or to display error message but seems its incompatible with input tags.

baibav · Answer 1 · Mon Jun 09 2014 16:17:10 GMT+0800 (China Standard Time)

To make it work I wrapped it in an tag

but It is not the solution epically when I want tooltip on focus.

Albin Larsson · Answer 2 · Mon Jun 09 2014 19:25:16 GMT+0800 (China Standard Time)

I think it should work... Can you post a Fiddle?

Kushagra Gour · Answer 3 · Mon Jun 16 2014 02:01:23 GMT+0800 (China Standard Time)

Well, input tags don't support pseudo elements and hence Hint.css doesn't work on them. You have 2 ways to go:

JS Method: Wrap input in an element and put tooltips on that wrapper. Plus to toggle them on input focus, you'll need additional JavaScript.
CSS Method: This one needs a lil hacky markup. Basically you can put tooltip on an element placed just after the input tag and hence same width as that of input. Then you'll need to modify the hint.css file a bit to make tooltips visible on input:focus + .hint selector along with .hint:hover and .hint:focus everywhere.