SharePoint List Column Formatting-Can't get hover text to work with hyperlink column

Question

Hi all,

A customer has asked for a tooltip (hover text) to be added when a user hovers over a hyperlink. They'd like it shown on a page. In SharePoint Server (classic page) they could add HTML to a Content Editor web part and format it how they liked, but they're in a modern Communication site now.

I couldn't find a property for this either in the Link web part or in the Quick Links web part. So I started experimenting with List Column formatting.

I created a list with a hyperlink column ("Link"), and a single line of text column ("Description") which contains the hover text for the hyperlink. The all items list view will show the hover text correctly, but if I use a view which only includes the hyperlink column, it doesn't work.

Below is the JSON I'm using for the Link column.

It seems like this should be a fairly easy thing to accomplish, but so far I haven't had any luck. Is there something incorrect in my JSON? Or is there a better way to accomplish this?

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

Answer 1

Hi @Kevin Worthington ,

I tested it against your description and it is as you described. When the Description column is undisplayed in the sharepoint list view, the text of the hover description column does not display properly.Because the description column is not found in the current view, so it shows an exception. This is a known limitation of SharePoint JSON formatting.

For SharePoint Online Modern Page, it is necessary to install React Script Editor Web Part to customize description tooltip for hyperlink field using Jquery.

Add The Script Editor Webpart back to SharePoint Modern Experience

Then find the hyperlink field CSS class using Browser Developer Tool:

Then update the title arrtibute using Jquery, title attribute is the hover tooltip text for hyperlink field:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() { 
setInterval(function(){
 $("a.urlField_48326872:eq(0)").attr("title","test0")
 $("a.urlField_48326872:eq(1)").attr("title","test1");
}, 100);
 });
</script>

The hyperlink field CSS classn "a.urlField_48326872" should be different with yours, please check it using Browser Developer Tool as suggested above.

Paste into React Script Editor Web Part in Modern Page:

Save and publish the page,then the hover tooltip will change when mouse hover:

Reference:https://social.technet.microsoft.com/Forums/office/en-US/90a0a62d-d051-4c3e-ab55-ae4691419288/how-to-show-a-description-of-a-link-different-name-on-mouse-tip-on-a-list-webpart-on-sharepoint

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

---

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.