search

chinchang / hint.css

A CSS only tooltip library for your lovely websites.
https://kushagra.dev/lab/hint/
MIT License
8.42k stars 701 forks source link

Not wotking with input tags #79

Closed baibav closed 8 years ago

baibav commented 10 years ago

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 commented 10 years ago

To make it work I wrapped it in an tag but It is not the solution epically when I want tooltip on focus.

Abbe98 commented 10 years ago

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

chinchang commented 10 years ago

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

  1. 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.
  2. 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.