Share via

How to add a hover box over the title of the column with the column's description in Sharepoint lists

Jean 25 Reputation points
Aug 8, 2023, 1:03 PM

Hi there,

I am new to Sharepoint and have been learning how to create lists.

I have a number of columns where it would be helpful to see the description without needing to open and edit. Is there a way to create a box containing the description of the column when I hover the mouse pointer over the title of the column?

I tried to look under format column but when code comes up then I want to run and hide!

Any help would be welcome!

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
11,231 questions
{count} vote

Accepted answer
  1. Zehui Yao_MSFT 5,871 Reputation points
    Aug 9, 2023, 8:29 AM

    Hi Jean, welcome to the forum! I am glad to be able to help you.

    Per our research on this issue, since JSON formatting does not currently support formatting the column headers.

    You can only format the item in column using the below JSON.

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "div",
      "style": {
        "font-size": "12px"
      },
      "txtContent": "@currentField",
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "txtContent": "TestDescription",
          "style": {
            "font-size": "12px",
            "color": "green",
            "padding": "5px"
          }
        },
        "openOnEvent": "hover",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "beakStyle": {
          "backgroundColor": "white"
        }
      }
    }
    

    User's image

    User's image

    Please note that you need to manually type the description in txtContent attribute in formatter for every column. Due to known limitations, JSON code cannot get column descriptions in the edit bar.

    User's image

    Hope this helps.

    Best Regards.


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.