Using Json to hover over a column, and display its information

Question

So I have a list with a comment column. I would like to hover over it, and have its information displayed in a card. However I used the code below

{
    "elmType": "div",
    "style": {
        "font-size": "12px"
    },
    "txtContent": "[$Comment]",
    "customCardProps": {
        "formatter": {
            "elmType": "div",
            "txtContent": "[$Comment]"
        },
        "openOnEvent": "hover",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "beakStyle" : {
            "backgroundColor": "white"
        }
    }
}

and the problem I am having, is inside the comment column now, a div tag is displayed. Before the column would say "needs adjusting" but now it says "<div class="ExternalClass/>"needs adjusting" why is the div tag being displayed now?

Answer 1

Unfortunately, Rich Text fields aren't truly supported in List Formatting. You can get the values but there is no way to have the HTML tags render as expected using formatting. All of the HTML will be escaped and you will see it as part of the value.

You'll need to switch your Comment field to plain text in order to remove extra HTML formatting tags.