Forum Discussion

Tyler_Borchardt's avatar
Tyler_Borchardt
Brass Contributor
Jun 19, 2024
Solved

Multiple lines of data in txtContent of custom hover card

I have a list that I am building a custom view for that will be displayed on a SharePoint page. I would like to create a hovercard that displays some of the item's properties like its title, descript...
  • nhuawork's avatar
    nhuawork
    Jul 25, 2024

    Tyler_Borchardt:

     

    You need to create children DIV elements for each item you want to show in a separate line and use the "display" : "block"
    style property in your parent DIV element that contains the child DIV elements.

    {
    "elmType": "div",
    "style": {
        "font-size": "12px"
    },
    "txtContent": "@currentField",
    "customCardProps": {
        "openOnEvent": "hover",
        "formatter": {
            "elmType": "div",
            "style": {
                "font-size": "14px",
                "color": "darkred",
                "padding": "8px",
                "display": "block"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Tip: ' + [$TipTrickTitle]"
                },
                {
                    "elmType": "div",
                    "txtContent": "='Link: ' + [$Linktokb]"
                }
            ]
        }
    }
}

     

nhuawork's avatar
nhuawork
Copper Contributor
Jul 25, 2024

Tyler_Borchardt:

 

You need to create children DIV elements for each item you want to show in a separate line and use the "display" : "block"
style property in your parent DIV element that contains the child DIV elements.

{
    "elmType": "div",
    "style": {
        "font-size": "12px"
    },
    "txtContent": "@currentField",
    "customCardProps": {
        "openOnEvent": "hover",
        "formatter": {
            "elmType": "div",
            "style": {
                "font-size": "14px",
                "color": "darkred",
                "padding": "8px",
                "display": "block"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Tip: ' + [$TipTrickTitle]"
                },
                {
                    "elmType": "div",
                    "txtContent": "='Link: ' + [$Linktokb]"
                }
            ]
        }
    }
}

 

Resources