SOLVED

Require tool tip for each column of SharePoint list

Copper Contributor

Hello All,

 

I am having a list with 12 columns for SharePoint List , And I need to have tooltip for all the 12 columns.

Can any one please guide me how can I get it . 

 

 

4 Replies
best response confirmed by VI_Migration (Silver Contributor)
Solution

@siddiq ali for each column in your list where you want the tooltip you will need to format the column (advanced mode) and paste in the following JSON:

 

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

 

result.png

 

You can change the second txtContent line to whatever you want for the text in the tooltip.

Rob
Los Gallardos
Intranet, SharePoint, Website and Power Platform Manager (and classic 1967 Morris Traveller driver)

Thanks for the response Rob , But I need Dynamic Tool Tip where I can show the information what ever I need for each column (Title , NextValue, Comment)
You format the tooltip for each column and set what you want the tooltip to display. If you want anything else I'm not sure I understand your requirement.

@siddiq ali I agree that you need to be more specific about the information you would like to display in the tooltip.  This article does a good job of laying out most of the options.

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

 

1 best response

Accepted Solutions
best response confirmed by VI_Migration (Silver Contributor)
Solution

@siddiq ali for each column in your list where you want the tooltip you will need to format the column (advanced mode) and paste in the following JSON:

 

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

 

result.png

 

You can change the second txtContent line to whatever you want for the text in the tooltip.

Rob
Los Gallardos
Intranet, SharePoint, Website and Power Platform Manager (and classic 1967 Morris Traveller driver)

View solution in original post