SharePoint Column Formatting to Show Full Text on Hover
Question details
The user wants to format a SharePoint column to display truncated text in the list view while showing the complete text in a tooltip upon hovering over the cell.
- Product
- SharePoint
- Device & OS
- not provided
- Scenario
- Customizing a SharePoint list view to improve readability and save screen space without losing quick access to lengthy multi-line text entries.
- Observed behavior
- Long text strings either consume too much vertical space or get cut off entirely, making it difficult for users to read the full content without opening the specific list item.
Ensure you have 'Design' or 'Edit' permissions for the SharePoint list to modify column settings. You should also verify whether your target column is configured as plain text, as rich text columns contain HTML tags that may interfere with JSON formatting.
Use JSON Column Formatting with Title Attribute
Apply a JSON snippet in the column formatting settings to truncate the visible text using a substring function and display the full text using the native browser title attribute.
By utilizing the native HTML title attribute within SharePoint's JSON column formatting, you can generate a reliable, lightweight hover tooltip. This method is often more straightforward and performs better than configuring a custom SharePoint hover card (customCardProps).
Navigate to your SharePoint list. Click on the column header of the field you want to modify, select 'Column settings' from the dropdown menu, and click 'Format this column'.
In the formatting pane that appears on the right side of the screen, scroll to the bottom and click on 'Advanced mode'.
Paste the following JSON structure into the text box. Ensure you map the title attribute to the current field: {"$schema":"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json","elmType":"div","txtContent":"=substring(@currentField,0,15)+'...'","style":{"display":"block","overflow":"hidden","text-overflow":"ellipsis","white-space":"nowrap","max-height":"40px"},"attributes":{"title":"@currentField"}}.
Click the 'Save' button at the bottom of the pane. Hover your mouse pointer over a cell in that column to verify that the standard browser tooltip displays the full, unshortened text.
Need a Lightweight Office Suite? Try WPS Office
While SharePoint handles your complex list formatting and data management, WPS Office is the perfect free alternative to Microsoft Office for editing the Word, Excel, and PowerPoint documents stored in your libraries. It's lightweight, fully compatible, and incredibly easy to use.
Frequently Asked Questions
Why is my JSON column formatting not saving in SharePoint?
This usually happens due to syntax errors such as missing commas or mismatched brackets in the JSON code. Ensure the code is strictly formatted and that you have the correct 'Edit' or 'Design' permissions for the list.
Can I use this formatting on a 'Multiple lines of text' column?
Yes, but it is highly recommended to configure the column to use 'Plain text'. If the column is set to 'Enhanced rich text', the HTML tags (like <div> or <p>) will be treated as plain text and displayed literally in the hover tooltip.
What is the difference between customCardProps and the title attribute for hover text?
The title attribute triggers the native browser tooltip, which is highly reliable and lightweight. The customCardProps property creates a custom SharePoint hover card, which allows for rich formatting and multi-field layouts but requires more complex JSON and may render slightly slower.
How do I find the internal name of a SharePoint column?
Navigate to the List Settings by clicking the gear icon, then click on your specific column name under the Columns section. Look at the page URL in your browser address bar; the internal name is the value located right after 'Field=' at the end of the URL.
