4

How can I get the ID of an item in a ListView Web Part, on hover?

I need this ID to fetch some columns from the list, and show them in a tooltip box.

Can I get the whole thing done using javascript/jQuery?

2
  • What you are trying to do is not really clear to me. In order to show the ID, just edit the view and add the ID column to the view fields. As for the tooltip box, you should show us what you have done so far
    – MdMazzotti
    Mar 12 '14 at 13:37
  • My requirement is not to display the ID. What I want is, on hover of a list item, get some extra columns for the same item, and display in a tool tip box.
    – entryton
    Mar 12 '14 at 14:51
3

I am displaying a tooltip with the title of the item, using the below code.

$(document).ready(function() {
    ExecuteOrDelayUntilScriptLoaded(tooltipDisplay, "sp.js");
});

var itemID = "";
var title = "";
var offset = null;

function tooltipDisplay() {
    $("table.ms-listviewtable tr.ms-itmhover").hover(function(e){       
        var iids = $(this).attr('iid').split(',');
        itemID = iids[1];
        offset = $(this).offset();              
        showTooltip();
    },
    function(){  
        $("#tblToolTip").remove();
    });
}

function showTooltip() {    
    var clientContext = new SP.ClientContext.get_current(); 
    if (clientContext != undefined && clientContext != null) {
        var list = clientContext.get_web().get_lists().getByTitle("MyList");
        this.listItem = list.getItemById(itemID);
        clientContext.load(this.listItem, 'Title');
        clientContext.executeQueryAsync(Function.createDelegate(this, this.Success), 
                                        Function.createDelegate(this, this.Failed));
    }   
}

function Success() {
    title = listItem.get_item('Title');
    if (title != undefined && title != null && title != "") {
        displayTooltip();
    }   
}

function Failed(sender, args) {
    alert('Getting data failed. </br>Message: ' + args.get_message());
}

function displayTooltip() {
    var tempHtml = "<table id='tblToolTip'><tr>";   
    tempHtml += "<td id='tdToolTip' class='toolTipDisplay'>";
    tempHtml += "Title : " + title; 
    tempHtml += "</td></tr></table>";      
    $("body").append(tempHtml);     
    var obj = $("#tblToolTip");             
    obj.css({"position":"absolute", "top":(offset.top + 20) + "px", "left":offset.left + 20}).fadeIn("slow");
}

There is a class toolTipDisplay used here, which defines a background color for the tooltip. The css file containing the class has to be referenced from the code, or the background color maybe declared inline.

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.