Hover-Reveal Tools mini
Also known as: Hover Tools, Hover Tools, Hover ControlsTags: actions, contextual tools
Hover-Reveal Tools allows user to interact directly with the content. Hover-Reveal Tools are contextual tools that are shown when the user hovers over an element that has tools available. Hiding tools by default and revealing them on demand decreases the visual noise in the user interface and makes content cleaner and less cluttered.
When using Hover-Reveal Tools, discoverability might be an issue. As tools are shown only when hovering over elements, it might be difficult to discover this functionality.
On mouse over selected element gets highlighted and additional tools are revealed.
Sources
This pattern is inspired by “Hover Reveal Tools” pattern from Designing Web Interfaces.
Useful Links
Want to add links? Sign in to do that. New!
Code Examples
- No code examples yet
Want to add links to code examples? Sign in to do that. New!
Where Is It Used? (4 examples)
Search results
Source: WikiaContextual tools are shown when the user mouse overs a search results item.
Delete or mark a tweet
Source: FlickrTwitter reveals its additional tools, “Delete” and “Favorite”, when the user hovers over his tweets.
React to activities
Source: FlickrFlickr Photostream. Tools for each Flickr activity are revealed when mouse overing a row.
Some rights reserved
Comments
Ponch July 19, 2010 15:00
You should have mentioned, that on touch devices there is no such thing as hover. For smartphones or tablets you'll have to find a substitute.
janne July 19, 2010 15:12
Good point. When we turn this pattern from mini to a full pattern, we'll add a note about this.
Leave a comment