Hover-Reveal Tools mini
Also known as: Hover Tools, Hover Tools, Hover Controls
Tags: 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.
Source: http://linkedin.com/
On mouse over selected element gets highlighted and additional tools are revealed.
Useful links
Code snippets
- No code snippets yet.
Hover-Reveal Tools
Source: http://brizzly.com/Brizzly reveals tools on hover with actions such as reply, retweet happening inline.
Context sensitive action
Source: http://theworxhub.com/Interact with dashboard notices using context sensitive mouse-over actions.
Delete or mark a tweet
Source: http://flickr.com/Twitter reveals its additional tools, “Delete” and “Favorite”, when the user hovers over his tweets.
Search results
Source: http://wikia.com/Contextual tools are shown when the user mouse overs a search results item.
React to activities
Source: http://flickr.com/Flickr Photostream. Tools for each Flickr activity are revealed when mouse overing a row.
Drop-down menu is shown on hover
Source: http://flickr.com/A drop-down menu gets revealed on mouse over.
Pattern info
Creative Commons
Template: Patternry mini pattern
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