O'Reilly

Create Classy Inputs Using MooTools’ OverText

By on  

The MooTools More library is a goldmine. A treasure chest. Pirates booty, if you will (and, of course, I will). More is full of plugins that add a lot of class and functionality to your website with minimal effort. OverText is one of those plugins. OverText generates labels on top of your input boxes that serve as directives to your users as to what they should place into a given field.

The HTML

<input type="text" name="first_name" id="first-name" title="Your first name..." />

Nothing special here -- just an input box with a title attribute containing the desired label text.

The CSS

.overTxtLabel { color:#999; }

I've chosen to style my OverText labels with a lighter color -- feel free to customize however you'd like.

The MooTools JavaScript

window.addEvent('load',function() {
	new OverText('first-name',{ //there are many more options available!!
		positionOptions: {
			offset: {
				x: 8,
				y: 8
			}
		}
	});
});

The usage of OverText doesn't even require a description. You feed it a text field, any custom options you'd like, and that's it.

I love how MooTools can give your website an instant upgrade with plugins like this. MooTools FTW!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I...

  • New MooTools Plugin:  ElementFilter

    My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work. The XHTML I've used a list for this example...

Discussion

  1. Pavel

    Can you do this for jQuery?

  2. I think the main argument against these nice label / input combo’s are that once the form is completed, if the user wants to go back and check something, they can’t quickly find the field they’re looking for…especially with non-standard info.

  3. Adriaan, I wouldn’t use this on its own. I’d still have some text near the input. For instance, I would have some text next to the input that read “Phone Number” and the OverText would be the hint text “415-555-5555″

  4. I still prefer:

    <input type=”text” id=’textbox’ title=”Enter First Name” onblur=”if(this.value==”){this.value=this.title;}”
    onfocus=”if(this.value==this.title)this.value=”” />

  5. V1

    I would suggest adding a check for support of the placeholder attribute. And than provide wrapper for browser who do not support this.

    This ways you can separate your content from your functionality and leverage HTML5 technologies where possible.

  6. shockiii

    Would be better if the label tag was already there. So instead of creating the label element using the input title, you’d just look for it by the “for” attribute and use it. With your version, no javascript, no label. Plus, it’s easier to read the html in this way.

  7. David this is a great post with yet another simple amazing MooTools plugin. I don’t use MooTools on my site but jQ. I would love to see what you could write up for jQ. Thanks.

  8. Adam

    But what with the Form.Validator.Inline? The OverText stays in the same place after the form is validated, thus resulting in visual bug.

    lookie here: http://www.mooforum.net/help12/overtext-and-form-validator-inline-alts-aren-moving-t3508.html

  9. The solution there isn’t javascript oriented really but css. All you need to do is wrap your inputs in a container that has position:relative and the text will move with them.

  10. Daniel Steigerwald

    Just for fun, Google Closure implementation https://gist.github.com/756500

    “>http://jsfiddle.net/grgX8/ source code https://gist.github.com/756500

    https://gist.github.com/756500

    /embedded/”>

    Original Size: 614.97KB (126.03KB gzipped)
    Compiled Size: 18.59KB (7.19KB gzipped)

    Compilation FTW ;)

  11. Hi david, i found a bug when for example – images load, or when you resize the window,
    when these happends, the text is not on the right place.

    I found a fix – using the update() function and repeat it every second.

    OverText.update().periodical(1000);
    

    i think you should manchne it.

    sorry for my english

    • Just thought i should manchine it,
      The problem is when making a website from rtl.
      thats when you should use the code i put on the comment up.

      new OverText(el,{ //there are many more options available!!
      positionOptions: {
      position: 'upperRight',
      edge: 'upperRight',
      offset: {
      x: -7,
      y: 5
      }
      }
      });

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...