How to show a description of a link (different name) on mouse tip on a list webpart on SharePoint online

Question

_{Wednesday, March 13, 2019 5:11 PM}

I use a List webpart to display items in a list which have hyperlinks. and use a "List" webpart to pull the source list items to display on a modern page

Now we want to display a description of each link when mouse over it on the modern page, and the description is different than the link name (which entered in Description field when the hyperlink item is created)

Does anyone have tip on how to get that?

All replies (3)

_{Friday, March 15, 2019 1:19 AM ✅Answered}

Hi QuickLaunch,

Without script, this is by design to display the tooltip text same as the hyperlink field description.

And as your requirement, you will need to display the tooltip different with description, so this is necessary to use the script as suggested above as description will be rendered as title property in the hyperlink.

Thanks

Best Regards

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [email protected].

SharePoint Server 2019 has been released, you can click

here to download it.
Click

here to learn new features. Visit the dedicated

forum to share, explore and talk to experts about SharePoint Server 2019.

_{Thursday, March 14, 2019 8:31 AM}

Hi QuickLaunch,

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>

In my side the hyperlink field CSS class is "a.urlField_48326872" which 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:

Thanks

Best Regards

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [email protected].

SharePoint Server 2019 has been released, you can click

here to download it.
Click

here to learn new features. Visit the dedicated

forum to share, explore and talk to experts about SharePoint Server 2019.

_{Thursday, March 14, 2019 4:27 PM}

Thanks Jerry for the tip. This may work technically, except for following ...

Actually there is one more requirement for my case: 

The hyperlink will change as the user updates the content, and the business user needs to be able to add a link and the tooltip text without having to ask the IT admin every time.

Is there a way to enable to display of text on tooltip without using the script?  

Note, the link source list is a classic list which can be manipulated using additional columns.