Modernizr: removing touchscreen hover events on tap

Apple iOS devices think they are pretty smart. If a web developer creates an onmouseover event Safari for iOS fires the onmouseover event on the first tap and then fires the click event on the second tap. Other tablets and phones might do the same but I don’t own any. This can be great for onmouseover navigation menus but causes unexpected results on other controls.

For example, on one of my sites I recently converted a combobox list of names of colors to a set of color swatches (squares) that the user can click to choose one or more colors. Each color shown actually represents one or more colors (gray = gray, silver, blue) and an onmouseover event shows the user the list of colors meant to be represented by bluehost the swatch. On my iPad when I try to tap a color to select it instead I am shown my list of color names for this swatch. I don’t feel that this is very intuitive and I’d rather iPad users just not see the tooltip at all. Detecting each and every device that works this way would be tedious and I’d most likely fail at doing this.

This is where Modernizr comes in. built to help developers detect what features a browser supports. Most of the features being detected are of CSS3 and HTML5. Modernizer does detect whether the browser being used has the “touch” event. This is what we need. After adding the Modernizr library to our site we simply check for and if it’s true we don’t add our qTip to the controls. Now when users tap a swatch it correctly selects the color instead of showing the onmouseover tooltip pop-up.