Adding custom hover text using json to a MS List column

00100627 20 Reputation points
2025-01-16T10:05:52.3666667+00:00

I found the below code online, and it is just what I've been looking for for some time. The problem I'm having with code is that if I change the name of the column to something other than "Description" the hover action won't work. It only works if the column is named "Description" which I need to change to something else like notes or best in non-English characters. Please help me figure out what to do.
Thanks

{ "elmType": "div", "style": { "font-size": "12px" }, "txtContent": "@currentField", "customCardProps": { "formatter": { "elmType": "div", "txtContent": "[$Description]", "style": { "font-size": "12px", "color": "green", "padding": "5px" } }, "openOnEvent": "hover", "directionalHint": "bottomCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "white" } } }

Microsoft 365
Microsoft 365
Formerly Office 365, is a line of subscription services offered by Microsoft which adds to and includes the Microsoft Office product line.
5,572 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
1,030 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
3,230 questions
{count} votes

Accepted answer
  1. Xyza Xue_MSFT 27,736 Reputation points Microsoft Vendor
    2025-01-17T02:20:20.2666667+00:00

    Hi @00100627 ,

    You need to use the internal name of the column in your json code.

    How to fetch the internal name of a field from UI:

    Go to List settings >> Columns >> Click the column name >> See the internal name at the end of the URL(after ...Field=).

    For example(See the screenshot below), the internal name of the field I got from after Field= is bestin.(Omit spaces)

    User's image

    Result:

    User's image


    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.

    1 person found this answer helpful.

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.