Tooltip on input:text focus

[pavelloz]

Hi Arash,

Thank you very much for this clean solution (no js is a big plus for me).

I've been trying to add a tooltip to an input text (instead of placeholder), but it looks like it doesn't work (Fx 22), despite the :focus rules in the code. Im using multiline mode.

According to that snippet:

   [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after {
      visibility: visible;
      opacity: 1;
    }

I think it should at least show up.

Have you got any idea/suggestion what i could be doing wrong? (I tested on div/span and tooltips are working perfectly).

Regards,
Paweł

[arashmanteghi]

Hi :)

Unfortunately I guess you should try with javascript. We can add a tooltip too an input text with title attribute, but we can't apply style too it. At least I don't have any solution in css. Please see these example, they're in javascript:

http://jquerytools.org/demos/tooltip/form.html

http://www.isummation.com/blog/show-tooltip-when-input-element-get-focus/

[theshem]

@pavelloz That's because input is an empty tag. You can't use pseudo-element selectors (::before/::after) on empty tags which don't (and, are unable to) have any child element.

Looking for a solution?
Wrap the input element by <label> and apply the effect on that instead.