Adding custom hover text using json to a MS List column

Question

I found the below code on this website and it is just what I've been looking for for some time. The problem I'm having with code is that if I change the name of the column to something other than "Description" the hover action won't work. It only works if the column is named "Description" Which I need to change to something else like notes or best in non English characters.

PLESEAE help me figure out what to do. Thanks.

{ "elmType": "div", "style": { "font-size": "12px" }, "txtContent": "@currentField", "customCardProps": { "formatter": { "elmType": "div", "txtContent": "[$Description]", "style": { "font-size": "12px", "color": "green", "padding": "5px" } }, "openOnEvent": "hover", "directionalHint": "bottomCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "white" } } } 

Answer 1

No issues found with the json code. Worked in my testing with a different column name than [Description].

Needed to click on the text of [ContactLastName] for hover text to show up from column [ContactDetails].

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "font-size": "12px" }, "txtContent": "@currentField", "customCardProps": { "formatter": { "elmType": "div", "txtContent": "[$ContactDetails]", "style": { "font-size": "12px", "color": "green", "padding": "5px" } }, "openOnEvent": "hover", "directionalHint": "bottomCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "white" } } }