Extend SharePoint Columns using Custom Card with JSON

Recently a custom card feature is added to SharePoint List Formatting. By using that feature, SharePoint allows us to add the customized cards to the column, when ever hovering / clicking in List formatting (Column / View).

The below is the schema for custom card in Column / View formatting as follows,

[code lang=”js”]
{
"customCardProps": {
"type": "object",
"description": "Object that defines custom card props on hover/click",
"properties": {
"openOnEvent": {
"description": "Event name to decide on which the customCard should open",
"type": "string",
"pattern": "(click|hover)$"
},
"directionalHint": {
"description": "Specify the direction relative to the target in which CustomCard will be positioned",
"enum": [
"topCenter",
"bottomCenter",
"leftCenter",
"rightCenter"
]
},
"isBeakVisible": {
"description": "Specify if the beak is to be shown or not",
"type": "boolean"
},
"formatter": {
"description": "JSON object that defines formatting for customCards",
"$ref": "#/definitions/elm"
}
},
"required": [
"formatter",
"openOnEvent"
]
}
}
[/code]

Based on the schema, I like to show the simple example to display the image when ever we hovering over the Title column.

Output for the above JSON snippet is pictured below,