Alternate Hover

Hover over (or tap if on a tablet) the values in the Active column to see demonstrations of the different types of hover panels.

Username	Last Name	First Name	E-mail	Status
hnguyen	Nguyen	Hue	hue.nguyen@optum.demo	Active Empty
jolsen	Olsen	Jeremy	jeremy.olsen@optum.demo	Active Lots of Text This one has a lot of text. You should not have more content than this. Any additional content will be cropped. This one has a lot of text. You should not have more content than this. Any additional content will be cropped. This one has a lot of text. You should not have more content than this. Any additional content will be cropped.
nprice	Price	Natalia	natalia.price@optum.demo	Inactive
jradcliffe Big Object	Radcliffe	Jennifer	jennifer.radcliffe@optum.demo	Active
bryan Right-Aligned This hover panel is aligned to the right of the hover target.	Ryan	Brendan	brendan.ryan@optum.demo	Active
msanders	Sanders	Melanie	melanie.sanders@optum.demo	Active
bsorens	Sorensen	Brian	brian.sorensen@optum.demo	Inactive
etarkington	Tarkington	Elizabeth	elizabeth.tarkington@optum.demo	Active
rtuhey	Tuhey	Richard	richard.tuhey@optum.demo	Active Above This hover panel is aligned above the hover target.
svalentin Above and to the Right This hover panel is aligned to the right and above of the hover target.	Valentino	Samantha	samantha.valentino@optum.demo	Active

Developer Notes

Hovers can appear on almost anything.

Hover panels consist of two divs, one that contains the content of the hover panel (ux-hovr-content), and one (ux-hovr) that wraps around both the hover target and the content. The wrapping div can go around any content but is primarily intended for text or links. The wrapping div should get a second class that specifies the position of the panel relative to the target: left of the target (ux-hovr-left), above the target (ux-hovr-above), to the right (ux-hovr-right), or above and to the right (ux-hovr-above-right). Some browsers/tablets will not expand the viewport or introduce scrollbars for hover panels that appear off-screen, so be sure to position them so they are visible to the user.

Note: because a touch activates a hover panel on a tablet -- just like it does for links -- you must keep in mind that if you put an alternate hover panel on a link that it will not prevent the link from working. See the examples in the left-most table column (particulary the last row) on a tablet to see this behavior in practice.

The panels have a minimum width of 20T, but will expand to fit large items (like images or non-wrapping text). Use the ux-width... utility classes to prevent this behavior.

These require the event handlers in ux.js (initializeHoverPanels) for mouseover (desktop) or touch (tablet).