Hover-reveal

Hiding actions by default and revealing them on demand to make content cleaner.

Overview

Hover-reveal is used to hide contextual actions by default and make them visible on demand. Hover-reveal provides a quick and smart way to do actions on the site content. This reduces the visual noise in the user interface, and makes content clean and neat.

When to use this pattern?

When doing actions quickly on objects.
When there are similar objects that have the same actions.
When desiring to have a simple user interface.

Depending on characteristics of each object, effects of hover may be different. Hover-reveal can be divided into 2 types based on the number of actions, including:

Objects with few actions.
Objects with multiple actions.

Objects with few actions

For objects having few actions, actions on links/buttons/icons can be displayed directly when being hovered. The samples below are suitable in case the number of actions are less than 4.

Hover-reveal actions on links

Sample Content 1 Edit | Delete | Move
Sample Content 2 Edit | Delete | Move
Sample Content 3 Edit | Delete | Move
Sample Content 4 Edit | Delete | Move
Sample Content 5 Edit | Delete | Move

In details:

Object Style
Hover effect Background-color: #F8F8F8
Text Link body, a, a:hover, a:active

Hover-reveal actions on icons

Sample Content 1
Sample Content 2
Sample Content 3
Sample Content 4
Sample Content 5

In details:

Object Style
Hover effect Background-color: #F8F8F8
Icon elcom Platform icons

Hover-reveal actions on buttons

Sample Content 1
Sample Content 2
Sample Content 3
Sample Content 4
Sample Content 5

In details:

Object Style
Hover effect Background: #F8F8F8
Button btn, btn:hover, btn:focus, btn-mini

Hover-reveal actions on mixed buttons and icons

Sample Content 1
Sample Content 2
Sample Content 3
Sample Content 4
Sample Content 5

In details:

Object Style
Hover effect Background-color:#F8F8F8
Button btn, btn-primary, btn:hover, btn:focus, btn-mini

Objects with multiple actions

For objects having multiple actions, all actions can be put in a droplist menu and only links/buttons/icons showing the menu are displayed when being hovered. The followings are common usecases:

Hover-reveal actions displayed in a combo-box

Sample Content 1
Sample Content 2
Sample Content 3
Sample Content 4
Sample Content 5

In details:

Object Style
Hover effect Background: #F8F8F8
Droplist button btn-group, btn-toolbar, btn:hover, btn:focus, btn-mini
Dropdown menu dropdown-menu, a, a:hover

Hover-reveal actions displayed in an icon

Sample Content 1
Sample Content 2
Sample Content 3
Sample Content 4
Sample Content 5

In details:

Object Style
Hover effect Background-color:#F8F8F8
Icon elcom Platform icons
Dropdown menu dropdown-menu, a, a:hover