1

I need help with adding a Hover-function that lets you display all of the text inside $Description when hovering the mouse over the gallery card in SharePoint Online. Would anyone have knowledge of what to add and where to add it in below JSON?

Thanks in advance.

{   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "commandBarProps": {
        "commands": [
          {
            "key": "export",
            "hide": true
          },
          {
            "key": "share",
            "hide": true
          }
        ]   },   "height": 404,   "width": 241,   "hideSelection": true,   "fillHorizontally": true,   "formatter": {
        "style": {
          "display": "=if([$x], 'none', '')"
        },
        "elmType": "div",
        "attributes": {
          "class": "sp-card-container"
        },
        "children": [
          {
            "elmType": "button",
            "attributes": {
              "class": "sp-card-defaultClickButton",
              "role": "presentation"
            },
            "customRowAction": {
              "action": "defaultClick"
            }
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!Title.DisplayName]"
                  },
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "[$Title]",
                      "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                      "role": "heading",
                      "aria-level": "6"
                    },
                    "txtContent": "=if ([$Title] == '', '–', [$Title])"
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!DateReported.DisplayName]"
                  },
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "=if ([$DateReported.displayValue] == '', '–', [$DateReported.displayValue])",
                      "class": "ms-fontColor-neutralPrimary sp-card-content "
                    },
                    "txtContent": "=if ([$DateReported.displayValue] == '', '–', [$DateReported.displayValue])"
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!Description.DisplayName]"
                  },
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "[$Description]",
                      "class": "ms-fontColor-neutralPrimary sp-card-content  sp-card-multiline"
                    },
                    "txtContent": "=if ([$Description] == '', '–', [$Description])",
                    "style": {
                      "-webkit-line-clamp": "7",
                      "height": "140px",
                      "word-break": "keep-all"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!Status1.DisplayName]"
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-content sp-card-formatterRef"
                    },
                    "children": [
                      {
                        "columnFormatterReference": "[$Status1]"
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!Nextupdate.DisplayName]"
                  },
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "=if ([$Nextupdate.displayValue] == '', '–', [$Nextupdate.displayValue])",
                      "class": "ms-fontColor-neutralPrimary sp-card-content "
                    },
                    "txtContent": "=if ([$Nextupdate.displayValue] == '', '–', [$Nextupdate.displayValue])"
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-lastTextColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!Modified.DisplayName]"
                  },
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "=if ([$Modified.displayValue] == '', '–', [$Modified.displayValue])",
                      "class": "ms-fontColor-neutralPrimary sp-card-content "
                    },
                    "txtContent": "=if ([$Modified.displayValue] == '', '', [$Modified.displayValue])"
                  }
                ]
              }
            ]
          }
        ]   } }

1 Answer 1

0

You can use the customCardProps to create a custom hover card. If you want to do it for the whole card, then you can add it to the first child (the button with a class of sp-card-defaultClickButton. So a very basic one could be done by changing your format to:

{   
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
    "commandBarProps": {
        "commands": [
          {
            "key": "export",
            "hide": true
          },
          {
            "key": "share",
            "hide": true
          }
        ]   },   "height": 404,   "width": 241,   "hideSelection": true,   "fillHorizontally": true,   "formatter": {
        "style": {
          "display": "=if([$x], 'none', '')"
        },
        "elmType": "div",
        "attributes": {
          "class": "sp-card-container"
        },
        "children": [
          {
            "elmType": "button",
            "attributes": {
              "class": "sp-card-defaultClickButton",
              "role": "presentation"
            },
            "customRowAction": {
              "action": "defaultClick"
            },
            "customCardProps":{
              "openOnEvent": "hover",
              "isBeakVisible": true,
              "formatter": {
                "elmType": "div",
                "txtContent": "[$Description]",
                "style": {
                  "width": "200px",
                  "height": "100px"
                }
              }
            }
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!Title.DisplayName]"
                  },
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "[$Title]",
                      "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                      "role": "heading",
                      "aria-level": "6"
                    },
                    "txtContent": "=if ([$Title] == '', '–', [$Title])"
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!DateReported.DisplayName]"
                  },
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "=if ([$DateReported.displayValue] == '', '–', [$DateReported.displayValue])",
                      "class": "ms-fontColor-neutralPrimary sp-card-content "
                    },
                    "txtContent": "=if ([$DateReported.displayValue] == '', '–', [$DateReported.displayValue])"
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!Description.DisplayName]"
                  },
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "[$Description]",
                      "class": "ms-fontColor-neutralPrimary sp-card-content  sp-card-multiline"
                    },
                    "txtContent": "=if ([$Description] == '', '–', [$Description])",
                    "style": {
                      "-webkit-line-clamp": "7",
                      "height": "140px",
                      "word-break": "keep-all"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!Status1.DisplayName]"
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-content sp-card-formatterRef"
                    },
                    "children": [
                      {
                        "columnFormatterReference": "[$Status1]"
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!Nextupdate.DisplayName]"
                  },
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "=if ([$Nextupdate.displayValue] == '', '–', [$Nextupdate.displayValue])",
                      "class": "ms-fontColor-neutralPrimary sp-card-content "
                    },
                    "txtContent": "=if ([$Nextupdate.displayValue] == '', '–', [$Nextupdate.displayValue])"
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-lastTextColumnContainer"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary sp-card-label"
                    },
                    "txtContent": "[!Modified.DisplayName]"
                  },
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "=if ([$Modified.displayValue] == '', '–', [$Modified.displayValue])",
                      "class": "ms-fontColor-neutralPrimary sp-card-content "
                    },
                    "txtContent": "=if ([$Modified.displayValue] == '', '', [$Modified.displayValue])"
                  }
                ]
              }
            ]
          }
        ]   } }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.