From 95a326e4d0285889a7ba7c61a481a11fef7d8da4 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Wed, 1 Feb 2023 14:18:00 -0800
Subject: [PATCH] fix: HoverCard example adjusts to viewport, add docs

---
 .../src/react/HoverCard/HoverCard.Target.Example.tsx        | 1 +
 .../src/react/HoverCard/docs/HoverCardBestPractices.md      | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx b/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx
index 925cb62821100a..deedfcc27d09b0 100644
--- a/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx
+++ b/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx
@@ -73,6 +73,7 @@ const KeyCellWithHoverCard: React.FunctionComponent<{ item: IExampleItem }> = ({
     onRenderExpandedCard,
     renderData: item,
     directionalHint: DirectionalHint.rightTopEdge,
+    directionalHintFixed: false,
     gapSpace: 16,
     calloutProps: {
       isBeakVisible: true,
diff --git a/packages/react-examples/src/react/HoverCard/docs/HoverCardBestPractices.md b/packages/react-examples/src/react/HoverCard/docs/HoverCardBestPractices.md
index 2ca2bb91964795..1fe4ab63431800 100644
--- a/packages/react-examples/src/react/HoverCard/docs/HoverCardBestPractices.md
+++ b/packages/react-examples/src/react/HoverCard/docs/HoverCardBestPractices.md
@@ -1,4 +1,10 @@
 ### Layout
 
+- Hover cards, particularly expanding hover cards, are not well suited to small display sizes. It is best to only display the hover card on larger viewports.
 - 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.
+- When setting an explicit `directionalHint`, the hover card will not automatically adjust position based on screen availability unless `directionalHintFixed: false` is explicitly set.
+
+### Accessibility
+
+Hover cards are not accessible to anyone not using a mouse with hover capability. It is strongly suggested that any information or functionality available in the hover card is also easily accessible through another means. An example is using a hover card to preview page content on a link, where the content can also be accessed by following the link.