SharePoint Online JSON formatting - Conditional Popup

Question

I've created a custom view that includes a popup description of each file in my SharePoint library.

This works well when I'm within a sub-folder that has a list of files, but when I navigate to the main list of sub-folders within the library the custom formatting continues and a blank pop up appears because the folders don't have descriptions.

Is there a way to use conditional formatting so that the pop-up only appears for rows that have text in the description column?

This is my code currently:

{
  "elmType": "div",
  "style": {
    "font-size": "16px",
    "color": "white"
  },
  "txtContent": "@currentField",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "[$Description]",
      "style": {
        "font-size": "14px",
        "padding": "10px",
        "width": "500px",
        "color": "black",
        "background-color": "white"
      }
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "white"
    }
  }
}

Answer 1

You cannot show/hide customCardProps conditionally. You have to show/hide the element where you added customCardProps. So, you need to create two elements and show/hide them based on value of Description field.

Try below JSON code, it should work for you:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "16px",
    "color": "white"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "display": "=if([$Description] == '', 'block', 'none')"
      }
    },
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "style": {
        "display": "=if([$Description] == '', 'none', 'block')"
      },
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "txtContent": "[$Description]",
          "style": {
            "font-size": "14px",
            "padding": "10px",
            "width": "500px",
            "color": "black",
            "background-color": "white"
          }
        },
        "openOnEvent": "hover",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "beakStyle": {
          "backgroundColor": "white"
        }
      }
    }
  ]
}

Microsoft documentation: Use column formatting to customize SharePoint

Update from comments:

You can refer to the column formatting JSON schema at: https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json

You can see that there is no style property supported for customCardProps:

Answer 2

Try to check if the description is not empty using the below condition in customCardProps

"display": "=if(([$Description] ==''),'none','block')"

Full JSON

{
  "elmType": "div",
  "style": {
    "font-size": "16px",
    "color": "black"
  },
  "txtContent": "@currentField",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "[$Description]",
      "style": {
        "font-size": "14px",
        "padding": "10px",
        "width": "500px",
        "color": "black",
        "background-color": "white",
        "display": "=if(([$Description] ==''),'none','block')"
      }
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "white"
    }
  }
}

Output