Front-end page: I have a 'List' web part on my homepage, displaying IDs:

enter image description here

My Database: The web part above is displaying data from a 'List' page I have created: enter image description here

What I want to achieve: How do I create a rollover on the web part items to display the 'Library' name - 'Test 1234'? i.e.

enter image description here

After trying Deepmala's code

enter image description here

  1. After replacing 'Library' with 'Description'. It's showing unidentified.
  2. URL Link is missing as well, the original rollover effect is missing as well.

Use JSLink to achieve the same. Below code will display Library name in tool tip:

window.COB = window.COB || {};
window.COB.accordionItem = {
customItemHtml: function (ctx) {

    var accordionItemHtml = "<div title='" + ctx.CurrentItem.Library + "'>" + ctx.CurrentItem.ID;
    accordionItemHtml += "</div>";  
    return accordionItemHtml;
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Item = window.COB.accordionItem.customItemHtml;
|improve this answer|||||
  • Hi Deepmala, I have tried your code. However, when i replace the 'Library' field with 'Description' it's showing 'unidentified'. My original URL rollover effect went missing as well... Any help? I have updated the question with the latest development screens. – John Lee Apr 3 '18 at 1:40
  • I have shared the demo html. generate the html as per your need. Regarding the undefined, make sure Desc field contains value and field with same name exists. Also, Make sure fields added in code exists in selected view as well. – Deepmala Apr 3 '18 at 3:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.