{"id":17298,"date":"2012-06-26T13:02:56","date_gmt":"2012-06-26T20:02:56","guid":{"rendered":"http:\/\/css-tricks.com\/?p=17298"},"modified":"2013-10-11T13:55:18","modified_gmt":"2013-10-11T20:55:18","slug":"transition-delay-delays","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/transition-delay-delays\/","title":{"rendered":"Transition Delay Delays"},"content":{"rendered":"

A while ago we covered a cool “hover” technique<\/a> by Doug Neiner where an informational popup was displayed when you hovered over a picture. The first<\/em> time you hovered over, there was a delay. This was to prevent accidental or fly-by mouse overs, as opposed to intentionally focusing on a particular picture. Subsequent<\/em> hovers showed the popup immediately. The idea being that you’re already in that exploratory mode. <\/p>\n

Doug used jQuery for the animations and some fancy dancing to keep track of the hover state and how it should be behaving. Let’s do it a bit of a different way using CSS transitions with delays, and then just a touch of jQuery to keep track of the state.<\/p>\n

<\/p>\n

Use Case<\/h3>\n

Let’s say you have a row of functionality buttons. Users can click the button, or use a keyboard command that triggers the function. Power users love keyboard commands but need to learn them first and sometimes need reminders. So you decide to go with some kind of popup that will show the command when the button is hovered. <\/p>\n

But mobile devices don’t have hover!!<\/em> Correct, or keyboards such that keyboard commands would be useful in this use case.<\/p>\n

Title attribute?<\/h3>\n

One way you could go is a title attribute. <\/p>\n

<a href=\"#\" class=\"function button\" title=\"\u2318G\">Do Thing<\/a><\/code><\/pre>\n
This is a totally decent way to go. You’ll get a standard title popup like this when hovered over:<\/p>\n
\"\"<\/figure>\n
In fact, the default behavior of title attribute is just as we described. The first hover will take a little bit to reveal the popup, but other links hovered over quickly will reveal right away, until enough time is given for the active popup to fade away completely.<\/p>\n
Nice. But… no design control (c’mon shadow DOM!), no specific functionality control, and as you’ll see in a moment, no generated content allowed.<\/p>\n
By hand<\/h3>\n
Instead lets hand-roll this thing. We’ll put the command right in the markup:<\/p>\n
<nav>\r\n  <a href=\"#\" class=\"button\">\r\n    Cut\r\n    <span class=\"command\">\r\n      <span class=\"screen-reader-text\">Keyboard Command:<\/span>\r\n      <span class=\"mod\">X<\/span>\r\n    <\/span>\r\n  <\/a>\r\n  ...\r\n<\/nav><\/code><\/pre>\n
This way we will:<\/p>\n