HoverCard — HoverCard • shiny.fluent

Hover cards (HoverCard) show commands and information, such as metadata and activity, when someone hovers over an item.

Tabbing with a keyboard to the element triggering the HoverCard to open on focus (see first example). In this case no further navigation within the card is available and navigating to the next element will close the card.
Tabbing with a keyboard to the element triggering the HoverCard and opening when the hotKey is pressed (see second example). When the card is opened it will automatically focus the first focusable element of the card content.

For more details and examples visit the official docs. The R package can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

HoverCard(...)

Arguments

compactCardHeight: number
Height of compact card
expandedCardHeight: number
Height of expanded card
mode: ExpandingCardMode
Use to open the card in expanded format and not wait for the delay
onRenderCompactCard: IRenderFunction<any>
Render function to populate compact content area
onRenderExpandedCard: IRenderFunction<any>
Render function to populate expanded content area
cardDismissDelay: number
Length of card dismiss delay. A min number is necessary for pointer to hop between target and card
cardOpenDelay: number
Length of compact card delay
className: string
Additional CSS class(es) to apply to the HoverCard root element.
componentRef: IRefObject<IHoverCard>
Optional callback to access the IHoverCardHost interface. Use this instead of ref for accessing the public methods and properties of the component.
eventListenerTarget: HTMLElement | string | null
This prop is to separate the target to anchor hover card from the target to attach event listener. If set, this prop separates the target to anchor the hover card from the target to attach the event listener. When no eventListenerTarget given, HoverCard will use target prop or its root to set event listener.
expandedCardOpenDelay: number
Time in ms when expanded card should open after compact card
expandingCardProps: IExpandingCardProps
Additional ExpandingCard props to pass through HoverCard like renderers, target. gapSpace etc. Used along with 'type' prop set to HoverCardType.expanding. Reference detail properties in ICardProps and IExpandingCardProps.
instantOpenOnClick: boolean
Enables instant open of the full card upon click
onCardExpand: () => void
Callback when visible card is expanded.
onCardHide: () => void
Callback when card hides
onCardVisible: () => void
Callback when card becomes visible
openHotKey: KeyCodes
HotKey used for opening the HoverCard when tabbed to target.
plainCardProps: IPlainCardProps
Additional PlainCard props to pass through HoverCard like renderers, target, gapSpace etc. Used along with 'type' prop set to HoverCardType.plain. See for more details ICardProps and IPlainCardProps interfaces.
setAriaDescribedBy: boolean
Whether or not to mark the container as described by the hover card. If not specified, the caller should mark as element as described by the hover card id.
setInitialFocus: boolean
Set to true to set focus on the first focusable element in the card. Works in pair with the 'trapFocus' prop.
shouldBlockHoverCard: () => void
Should block hover card or not
sticky: boolean
If true disables Card dismiss upon mouse leave, so that card sticks around.
styles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>
Custom styles for this component
target: HTMLElement | string | null
Optional target element to tag hover card on. If not provided and using HoverCard as a wrapper, don't set the 'data-is-focusable=true' attribute to the root of the wrapped child. If no target is given, HoverCard will use its root as a target and become the focusable element with a focus listener attached to it.
theme: ITheme
Theme provided by higher order component.
trapFocus: boolean
Set to true if you want to render the content of the HoverCard in a FocusTrapZone for accessibility reasons. Optionally 'setInitialFocus' prop can be set to true to move focus inside the FocusTrapZone.
type: HoverCardType
Type of the hover card to render.
onRenderPlainCard: IRenderFunction<any>
Render function to populate compact content area

Best practices

Layout

Hover cards contain both compact and expanded states, with the compact state appearing after 500 milliseconds and the expanded state appearing as the user continues to hover after 1500 milliseconds.
The hover card positions itself automatically, depending upon where the target is on the viewport. Position the target so the card doesn’t obstruct inline commanding on the item.

Examples

library(shiny.fluent)

if (interactive()) {
  shinyApp(
    ui = HoverCard(
      type = "PlainCard",
      plainCardProps = JS("{
        onRenderPlainCard: (a, b, c) => 'HoverCard contents',
        style: { margin: 10 }
      }"),
      "Hover over me"
    ),
    server = function(input, output) {}
  )
}