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"
    }
  }
}