Pure CSS Tooltip
I’ve been playing with some experimental attributes and this is what I got so far.
I’ve been playing with some experimental attributes and this is what I got so far.
Dizain - HTML5 & iOS Ready Web Development Framework
We build “teaser” pages for upcoming projects, we collect users’ email addresses and send them invitations. But be careful here, this is your first rollout, i.e. the first impression of your project. How sad would it be if you screw it up?
Back to our topic, you may wanna start with this:
<input type=”email” />
Nice, clean and neat. Then style it.
background-color: #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.27), 1px 2px 3px rgba(0, 0, 0, 0.443) inset;
color: #888;
border: 1px solid #333;
cursor: text;
padding: 10px;
font: italic 16px Georgia;
width: 280px;
display: inline-block;Wait, did we mention it’s a input form for E-mail addresses?
<input type=”email” name=”email” />
This is tricky. When the “name” of elements are the same and the “autocomplete” is enabled, as you type, the browser will show “auto complete” results, hence we got your idiomatic Email address(es).
Wait, assume you have a unconventional name/username, like me, “disinfeqt”. Our browser made a difficult decision, then a ugly, red wavy line appears at the bottom of your Email address. You will thank me for this:
<input type=”email” name=”email” spellcheck=”false” />
Then you begin to think about some hints:
<input type=”email” name=”email” spellcheck=”false” placeholder=”yourname@example.com” />
The “placeholder” works dramatically in Webkit browsers, like Safari and Chrome, but does nothing in Firefox.
Last trick for our input form, try to disable this input form after submitting user’s Email, with jQuery:
$(“input[type=email]”).attr(“disabled”,”true”);
Isn’t this fun?
Update: I forget one last trick, add ime-mode: disabled; into your stylesheet, specific optimization for non-English users.
