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.
