Customize IgTree (Infragistics jquery control)

Question

I am trying to use Infragistics jquery igTree control. My requirement is that: When the user hovers over any child node, I need to show an image and a tool-tip for that node. The image is showing up but not the tool tip. I tried to mock the code as given in http://jsfiddle.net/haFMn/17/

But it doesn't work for me. The div is getting displayed [at its original location] but not at the node level. Could anyone help me out in this. I am pasting the TreeView.cshtml page for your reference. [Image path need to be changed if you want to see them correctly]

//***********Start Code ************************

@{
   ViewBag.Title = "TreeView";
  }

  <h2>TreeView</h2>



  <script type="text/javascript">

   $(document).ready(function () {

       var offsetX = 20,
            offsetY = 20;

    $(".desc_hover").live('mouseenter', function (evt) {
        var par = $(this).parent();
        // if text is Tokyo Traders add image after node
        //if ($(this).text() == "Tokyo Traders")
        // if there is alredy added image do not add image again
        if (par.find(">img").length < 2) {
            var html = "<img class='favsport' src='../../Content/images/Football.png' title='Folder' style='border:none;width=20px;height=20px' id='imgdiv'></img>";
            par.append(html);
        }


        var o = {
            left: evt.pageX,
            top: evt.pageY
        };
        $("#test").show().offset(o);

    });
    $(".desc_hover").live('mouseleave', function (evt, ui) {
        var par = $(this).parent();
        par.find($('#imgdiv')).remove();

        $("#test").hide(2000);

    });
    var url = 'http://services.odata.org/OData/OData.svc/Categories?$format=json&$callback=?';
    //creates new JSONP data source for OData
    var jsonp = new $.ig.JSONPDataSource({ dataSource: url, responseDataKey: "d" });
    //Load on demand happens automatically using OData, the loadOnDemand option,
    //and properly configured bindings  ><img class='favsport' src='../../Content/images/folder.png' alt='football' style='display: none;'></img>
    $("#tree1").igTree({
        dataSource: jsonp,
        dataSourceType: 'jsonp',
        responseDataKey: 'd',
        loadOnDemand: true,
        bindings: {
            textKey: 'Name',
            valueKey: 'ID',
            primaryKey: 'ID',
            nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' title='Folder' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
            childDataProperty: 'Products',
            bindings: {
                textKey: 'Name',
                valueKey: 'ID',
                primaryKey: 'ID',
                nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' alt='football' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
                childDataProperty: 'Supplier',
                bindings: {
                    textKey: 'Name',
                    valueKey: 'ID',
                    nodeContentTemplate: "<span  data-tag><img class='favsport' src='../../Content/images/file.png'alt='football' style='border:none;width=20px;height=20px'></img><label class='desc_hover'>${Name}</label></span>"
                }
            }
        }
    });
});




</script>

          <div class="content clearfix">
            <!-- side nav begins here -->

            <div id = "test1" class="side-nav">
                <div id="tree1">
                    <p>Anirban</p>
                    </div>
            </div>

            <!-- side nav ends here -->
            <section class="main-box">
                <hgroup>
                    <h1>
                        Infragistics TreeView Control</h1>
                    <h2>
                        Load on demand </h2>
                    <p>
                        The other grid will go here</p>
                </hgroup>
                <div class="sampleContainer">
                    <!--igTree target element-->
                    <div id="sampleContent">

                    </div>

                </div>
            </section>
             <span id="test" style="display:none;">This is a test</span>
        </div>

Answer 1

Attach the span to the body and make it position absolute:

<body>
    <!-- Your other markup -->
    <span id="test" style="position: absolute; display: none;">This is a test</span>
</body>

This should resolve the issue that your having with the span not repositioning.

Answer 2

Have you checked the online help? There are options for tooltip and image url. Please take a look at the following link containing all the available at the moment options - link