Hover Details Version 2.0.0.0Print this Page
Detail on Demand Pattern Set
 
Description
Return to Top
Use the Hover Details pattern when users need to quickly access and close information. The details appear in a layer that is visible when users move their cursors over links or icon buttons and then close when users move their cursors off the layer containing the details. Components that appear in the detail window should not require complex mouse interaction (other than a single click for a link) because it is difficult to move a cursor around within the detail window without closing the detail layer itself. Use this pattern in conjunction with drill-down details so that the full details are visible when users click the objects that they are moving their cursors over (for accessibility reasons).
 
Key Considerations
Return to Top

Hover details differ from contextual actions in a few key ways.

Hover Details Contextual Actions
Enable users to view underlying information that exists on a detail page. A detail page must be included for accessibility reasons.
Provide detailed information about an object within a record. A detail page is not required.
Restrict actions against objects; information should be read-only (links are acceptable). Enable multiple actions against the object.
 
Pattern Set Decision Table
Return to Top
  Hover
Details		 Dialog Box
Details		 Hide and
Show Details		 Show More/
Show Less
Detail		 Drill-Down
Details
Do the details become a primary resource for users and steps in their tasks? Do the users spend considerable time looking at the details? No No Yes Yes Yes
Do users need to quickly obtain details (glance and close)? Yes Yes Yes No No
Do these details need to be seen in conjunction with the other information? Yes Yes Yes Yes No
How much space do the details use? Small
read-only
form
or data		 Does not exceed
512 x 384
pixels		 A few inches
of screen
real estate		 A few inches
of screen
real estate		 A page or
more of
detail
 
Pattern Sample
Return to Top

Details appear when users move their cursors over elements. Information that appears in the detail window provides details about the object that was targeted by the user. When users move their cursors off the details that appear, the detail window closes. If users click the object over which their cursor is moving, they move to a page containing the full details about the object (information listed in the hover layer plus any additional information).

Figure 1. Details appear when users move their cursors over elements
Required Screen Elements
Component Type Required Components Customizable or
Extendable Components
Launch Element A link or icon button that represents an object appearing in a table cell or on a form. NA
Detail Dialog Box A dialog box without a title bar or toolbar that appears when users move their cursors over valid objects. The detail window closes when users move their cursors off this dialog box. Product teams can determine the size of the rollover layer, but they should be careful to keep the rollover layer from getting so large that it obscures the base page or it is difficult for the user to roll off of it.
Detail Content The content area of the detail window that provides detail about the object. For accessibility reasons, the same or more information must be available when the user clicks and drills into the object (Drill-Down Details pattern). Content is to be determined by product teams and can contain any component that is not editable or that does not require any mouse interaction other than a single click (small number of read-only fields, charts, list of elements or links, or other small amounts of data).
 
Related Guidelines
Return to Top
Secondary Windows Guidelines on using secondary windows or dialog boxes
 
About Oracle | Legal Notices | Terms of Use | Your Privacy Rights