Hover and Default cards example on formatting docs (SharePoint#5500)

* <hover card changes>

* <hover card changes>

* <hover card changes>

* <hover card changes>

* hovercardupdate

* hovercardupdate

* hovercardupdate

* hovercardupdate

* hovercardupdate

* hovercardupdate

* hovercardupdate

Co-authored-by: Niket Jain <[email protected]>

Author: niketjain2020

docs/declarative-customization/column-formatting.md

@@ -720,6 +720,97 @@ This examples uses operator `loopIndex` to control the margins all rows but the
 }
 ```
 
+### Custom cards on hover 
+
+The following image shows a list with a custom hover added to a List:
+
+On hover - Metadata on the column "Status" is made available in view formatting
+
+![](../images/HoverImage-1.png)
+
+On hover - Metadata on the column "Status" is made available in column formatting
+
+![](../images/HoverImage-2.png)
+
+
+
+You can use column and view formatting to define custom call out that can be commissioned basis user defined actions like click or hover
+
+This example uses customCardProps, openOnEvent, directionalHint and isBeakVisible
+
+```JSON
+
+{
+    "elmType": "div",
+    "style": {
+        "font-size": "12px"
+    },
+    "txtContent": "[$Status]",
+    "customCardProps": {
+        "formatter": {
+            "elmType": "div",
+            "txtContent": "Define your formatter options inside the customCarProps/formatter property"
+        },
+        "openOnEvent": "hover",
+        "directionalHint": "bottomCenter",
+        "isBeakVisible": true
+    }
+}
+```
+## Default cards on hover via formatting 
+
+Users can now have profile card or file hover card on formatters too, some of the things users can now do -
+	1) Profile card or File Hover card on any column 
+	2) Profile card or Hover card with view formatting
+
+Hover on a filename with formatting with default file card 
+
+![](../images/HoverImage-3.png)
+
+
+Hover on a person column with formatting with default Profile card 
+
+![](../images/HoverImage-4.png)
+
+Both the example uses defaultHoverField 
+
+```JSON
+
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
+    "elmType": "div",
+    "children": [
+        {
+            "elmType": "img",
+            "style": {
+                "width": "32px",
+                "height": "32px",
+                "overflow": "hidden",
+                "border-radius": "50%",
+                "margin": "2px"
+            },
+            "attributes": {
+                "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$Editor.email]",
+                "title": "[$Editor.title]"
+            }
+        },
+        {
+            "elmType": "span",
+            "style": {
+                "vertical-align": "middle",
+                "margin-left": "2px"
+            },
+            "txtContent": "[$Editor.title]"
+        }
+    ],
+    "defaultHoverField": "[$Editor]"
+}
+
+```
+
+
+
+
 ## Supported column types
 
 The following column types support column formatting:
@@ -1378,7 +1469,15 @@ The people field object has the following properties (with example values):
    "jobTitle":"HR Manager"
 }
 ```
+People field can have profile hover cards along with formatting
 
+```json
+{
+   "elmType": "div",
+   "txtContent": "[$Editor.title]",
+   "defaultHoverField": "[$Editor]"  
+}
+```
 **Date/Time fields**
 
 The value of Date/Time fields can be retrieved a few different ways, depending on the date format you'd like to display. The following methods for converting date values to specific formats are supported: 
@@ -1426,7 +1525,7 @@ The ___location field object has the following properties (with example values):
       "Longitude": "-83.92420959472656"
    },
    "DisplayName": "World's Fair Park",
-   "LocationUri: "https://www.bingapis.com/api/v6/localentities/8346bf26-6da4-104c-6ba5-2334b83f6ac8?setLang=en"
+   "LocationUri": "https://www.bingapis.com/api/v6/localentities/8346bf26-6da4-104c-6ba5-2334b83f6ac8?setLang=en"
 }
 ```
 
@@ -1629,7 +1728,7 @@ These tokens will yield no value on non-file items including folders.
 > [!TIP]
 > Thumbnails are only available for a list of supported file formats. It means that sometimes the URL generated is not accessible due to lack of support on certain formats. However, if a valid thumbnail token is set as the _only_ `src` attribute of an `img` tag, we will take care of it and hide the image when it is not available.
 
-```json
+```JSON
 {
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "img",
@@ -1643,7 +1742,23 @@ These tokens will yield no value on non-file items including folders.
    }
 }
 ```
+Default file hover card using FileLeafRef
 
+```JSON
+ {
+    "elmType": "img",
+    "style": {
+        "width": "100%",
+        "height": "100%",
+        "display": "=if([$File_x0020_Type] == '', 'none', '')"
+    },
+    "attributes": {
+        "src": "@thumbnail.300x300"
+    },
+    "defaultHoverField": "[$FileLeafRef]"
+}
+  ```
+  
 ## See also
 
 - [Column formatting](https://support.office.com/article/Column-formatting-1f927342-2bed-4745-b727-ff8b7ff96b22?ui=en-US&rs=en-US&ad=US)