0

I created MS List where I need to add a tooltip for "Prioritization" Column name when mouse over the Column Name.

Tooltip text to be displayed: "Ranking: C- Critical, H - High, M - Medium, L - Low", but only when hovering over the Column Title and not the column content. It should be visible both in editing and view mode.

I'm struggling with it as I'm not a programmer. Appreciate your help.

Here is the code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "overflow": "hidden",
        "margin": "4px 4px 4px 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$Prioritization]",
                "C"
              ]
            },
            "sp-css-backgroundColor-errorBackground50",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$Prioritization]",
                    "H"
                  ]
                },
                "sp-css-backgroundColor-blockingBackground50",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$Prioritization]",
                        "M"
                      ]
                    },
                    "sp-css-backgroundColor-warningBackground50",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$Prioritization]",
                            "L"
                          ]
                        },
                        "sp-css-backgroundColor-successBackground50",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                "[$Prioritization]",
                                ""
                              ]
                            },
                            "",
                            "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "line-height": "16px",
            "height": "14px"
          },
          "attributes": {
            "iconName": {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$Prioritization]",
                    "C"
                  ]
                },
                "",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$Prioritization]",
                        "H"
                      ]
                    },
                    "",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$Prioritization]",
                            "M"
                          ]
                        },
                        "",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                "[$Prioritization]",
                                "L"
                              ]
                            },
                            "",
                            {
                              "operator": ":",
                              "operands": [
                                {
                                  "operator": "==",
                                  "operands": [
                                    "[$Prioritization]",
                                    ""
                                  ]
                                },
                                "",
                                ""
                              ]
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          }
        },
        {
          "elmType": "span",
          "style": {
            "overflow": "hidden",
            "text-overflow": "ellipsis",
            "padding": "0 3px"
          },
          "txtContent": "[$Prioritization]",
          "attributes": {
            "class": {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$Prioritization]",
                    "C"
                  ]
                },
                "",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$Prioritization]",
                        "H"
                      ]
                    },
                    "",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$Prioritization]",
                            "M"
                          ]
                        },
                        "",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                "[$Prioritization]",
                                "L"
                              ]
                            },
                            "",
                            {
                              "operator": ":",
                              "operands": [
                                {
                                  "operator": "==",
                                  "operands": [
                                    "[$Prioritization]",
                                    ""
                                  ]
                                },
                                "",
                                ""
                              ]
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          }
        }
      ]
    }
  ],
  "txtContent": "@currentField",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "Ranking: C - Critical, H - High, M - Medium, L - Low."
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "white"
    }
  }
}

In addition the code added at the end for a tooltip damages the formatting of the ranks (color coding for radio buttons). Don't know how to fix.

0

For now, SharePoint Online does not support JSON formatting on column header in view formatting. Here is the user voice post talking about this feature. You can vote on it to convey your thoughts and make MS develop team to consider about it.

0

This is a known limitation of JSON formatting in SharePoint.

You cannot format the column headers using JSON formatting in SharePoint online.

Similar threads:

  1. SharePoint Online - formatting column headers
  2. SharePoint Modern Column Header cuts off

I have created a SharePoint UserVoice for the exact same requirements before.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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