Adding custom hover text using json to a SharePoint list column

Question

I have a SharePoint list which has a Title column and a Description. The Description column is a multi-line text field.

I would like to not display the Description column and instead show the relevant Description when moving the cursor over the Title field.

I've found JSON code to display a card or image when hovering over a field but I'm not sure how to do something similar with just a string of text.

I'm guessing it's fairly easy for someone who knows what they are doing!

Answer 1

You can try this and customize to suit your need

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