custom-card-tiles.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 223,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "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": "3"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Nichiji.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "=if ([$Nichiji.displayValue] == '', '–', [$Nichiji.displayValue])",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Nichiji.displayValue] == '', '–', [$Nichiji.displayValue])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Situation.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Situation]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Situation] == '', '–', [$Situation])"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "z-index": "1",
              "width": "150px",
              "margin": "10px"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "Open Custom Card",
                "style": {
                  "padding": "5px 10px",
                  "border-radius": "3px",
                  "cursor": "pointer",
                  "text-align": "center"
                },
                "attributes": {
                  "class": "ms-bgColor-themePrimary ms-bgColor-themeDarker--hover ms-fontColor-white"
                },
                "customCardProps": {
                  "formatter": {
                    "elmType": "div",
                    "style": {
                      "padding": "0px 10px 0px 10px",
                      "flex-flow": "column",
                      "align-items": "start"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "children": [
                          {
                            "elmType": "p",
                            "txtContent": "[!Nichiji.DisplayName]"
                          },
                          {
                            "elmType": "p",
                            "txtContent": "=if ([$Nichiji] == '', '–', [$Nichiji])"
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "children": [
                          {
                            "elmType": "p",
                            "txtContent": "[!Situation.DisplayName]"
                          },
                          {
                            "elmType": "p",
                            "txtContent": "=if ([$Situation] == '', '–', [$Situation])"
                          }
                        ]
                      }
                    ]
                  },
                  "openOnEvent": "hover",
                  "directionalHint": "bottomCenter",
                  "isBeakVisible": true,
                  "beakStyle": {
                    "backgroundColor": "white"
                  }
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

カードを表示するボタンの要素を z-index を利用して上に表示するようにしています。

※z-index を設定しない場合、カードを表示するボタンの要素が下に表示されているため、ボタンをホバーしてもカードは表示されません。