how to customize tooltip for treeview nodes

Question

0.00/5 (No votes)

See more:

Hi,

I am having a tree view. If i keep the mouse over a child node, then the description about the node will appear on a tooltip.
everything is working fine,. But the tooltip is not customized properly acording to the page. I ll paste the source code below,

 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="RFPTemplate.aspx.cs" Inherits="SOW.RFPTemplate" %>
<%@ Register TagPrefix="Ajx" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="Scripts/qTip.js" type="text/javascript">
        function showToolTip(e) {
        debugger;
           TreeNode theNode =  this.treeView1.GetNodeAt(e.X, e.Y);
// Set a ToolTip only if the mouse pointer is actually paused on a node.
if ((theNode != null))
{
   // Verify that the tag property is not "null".
   if (theNode.Tag != null)
   {
      // Change the ToolTip only if the pointer moved to a new node.
      if (theNode.Tag.ToString()!=this.toolTip1.GetToolTip(this.treeView1))
      {
         this.toolTip1.SetToolTip(this.treeView1, theNode.Tag.ToString());
      }
   }     
   else
   {
      this.toolTip1.SetToolTip(this.treeView1, "");
   }
}
else     // Pointer is not over a node so clear the ToolTip.
{
   this.toolTip1.SetToolTip(this.treeView1, "");
}
        }
    
    </script>
  
    <script type="text/javascript"  >
//        $("#tree a[title]").tooltip()
        var TREEVIEW_ID = "TreeView1"; //the ID of the TreeView control
        
        //the constants used by GetNodeIndex()
        var LINK = 0;
        var CHECKBOX = 1;
        //this function is executed whenever user clicks on the node text
        function ToggleCheckBox(senderId) {
            debugger;
            var nodeIndex = GetNodeIndex(senderId, LINK);
            alert(senderId);
            var checkBoxId = TREEVIEW_ID + "n" + nodeIndex + "CheckBox";
            var checkBox = document.getElementById(checkBoxId);
            checkBox.checked = !checkBox.checked;
            ToggleChildCheckBoxes(checkBox);
            ToggleParentCheckBox(checkBox);
        }
        //checkbox click event handler
        function checkBox_Click(eventElement) {
            ToggleChildCheckBoxes(eventElement.target);
            ToggleParentCheckBox(eventElement.target);
        }
        //returns the index of the clicked link or the checkbox
        function GetNodeIndex(elementId, elementType) {
            var nodeIndex;
            if (elementType == LINK) {
                nodeIndex = elementId.substring((TREEVIEW_ID + "t").length);
            }
            else if (elementType == CHECKBOX) {
                nodeIndex = elementId.substring((TREEVIEW_ID + "n").length, elementId.indexOf("CheckBox"));
            }
            return nodeIndex;
        }
        function ClientValidate() {

            if (document.getElementById('RFPPlaceHolder_txtCustomer').value == "") {
                alert("Please enter Customer name");
                document.getElementById('RFPPlaceHolder_txtCustomer').focus();
                return false;
            }
            if (document.getElementById('RFPPlaceHolder_Txtcrm').value == "") {
                alert("Please enter CRM ID");
                document.getElementById('RFPPlaceHolder_Txtcrm').focus();
                return false;
            }
            if (document.getElementById('RFPPlaceHolder_txtEnddt').value == "") {
                alert("Please enter End Date");
                document.getElementById('RFPPlaceHolder_txtEnddt').focus();
                return false;
            }
        
            var treeView = document.getElementById("<%= TVContent.ClientID %>");
            var checkBoxes = treeView.getElementsByTagName("input");
            var checkedCount = 0;
            for (var i = 0; i < checkBoxes.length; i++)
            { if (checkBoxes[i].checked) { checkedCount++; } }
            if (checkedCount > 0) {
                return true;
            }

            
            else {
                alert("Please Select any Table of  content");
                return false;
            }
           
        }
        //checks or unchecks the nested checkboxes
        function ToggleChildCheckBoxes(checkBox) {
            debugger;
            var postfix = "n";
            var childContainerId = TREEVIEW_ID + postfix + GetNodeIndex(checkBox.id, CHECKBOX) + "Nodes";
            alert(childContainer);
            var childContainer = document.getElementById(childContainerId);
            if (childContainer) {
                var childCheckBoxes = childContainer.getElementsByTagName("input");
                for (var i = 0; i < childCheckBoxes.length; i++) {
                    childCheckBoxes[i].checked = checkBox.checked;
                }
            }
        }
        //unchecks the parent checkboxes if the current one is unchecked
        function ToggleParentCheckBox(checkBox) {
            if (checkBox.checked == false) {
                var parentContainer = GetParentNodeById(checkBox, TREEVIEW_ID);
                alert(parentContainer);
                if (parentContainer) {
                    var parentCheckBoxId = parentContainer.id.substring(0, parentContainer.id.search("Nodes")) + "CheckBox";
                    if ($get(parentCheckBoxId) && $get(parentCheckBoxId).type == "checkbox") {
                        $get(parentCheckBoxId).checked = false;
                        ToggleParentCheckBox($get(parentCheckBoxId));
                    }
                }
            }
        }
        //returns the ID of the parent container if the current checkbox is unchecked
        function GetParentNodeById(element, id) {
            var parent = element.parentNode;
            if (parent == null) {
                return false;
            }
            if (parent.id.search(id) == -1) {
                return GetParentNodeById(parent, id);
            }
            else {
                return parent;
            }
        }
        function OnTreeClick(evt) {
            var src = window.event != window.undefined ? window.event.srcElement : evt.target;
                
            var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
            if (isChkBoxClick) {
                var parentTable = GetParentByTagName("table", src);
                var nxtSibling = parentTable.nextSibling;
                //check if nxt sibling is not null & is an element node
                if (nxtSibling && nxtSibling.nodeType == 1) {
                    if (nxtSibling.tagName.toLowerCase() == "div") //if node has children
                    {
                        //check or uncheck children at all levels
                        CheckUncheckChildren(parentTable.nextSibling, src.checked);
                    }

                }
                //check or uncheck parents at all levels
                CheckUncheckParents(src, src.checked);
            }
        }
        function CheckUncheckChildren(childContainer, check) {
            var childChkBoxes = childContainer.getElementsByTagName("input");
            var childChkBoxCount = childChkBoxes.length;
            for (var i = 0; i < childChkBoxCount; i++) {
                childChkBoxes[i].checked = check;

            }
            //        TreeviewExpandCollapseNode(childContainer, true)

        }
        function CheckUncheckParents(srcChild, check) {
            var parentDiv = GetParentByTagName("div", srcChild);
            var parentNodeTable = parentDiv.previousSibling;
            if (parentNodeTable) {
                var checkUncheckSwitch = true; ;
                if (check) //checkbox checked
                {
                    var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
                    if (isAllSiblingsChecked) {
                        //                    TreeviewExpandCollapseAll('RFPPlaceHolder_TreeView1', true);
                        //             
                        checkUncheckSwitch = true;
                    }
                    else
                    //                    TreeviewExpandCollapseAll('RFPPlaceHolder_TreeView1', true);
                        checkUncheckSwitch = true; //do not need to check parent if any(one or more) child not checked
                }
                else //checkbox unchecked
                {
                    var isAllSiblingsChecked = AreAllSiblingsUnChecked(srcChild);
                    if (isAllSiblingsChecked) {
                        checkUncheckSwitch = false;
                    }
                    else
                        checkUncheckSwitch = true;
                }
                var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
                if (inpElemsInParentTable.length > 0) {
                    var parentNodeChkBox = inpElemsInParentTable[0];
                    parentNodeChkBox.checked = checkUncheckSwitch;
                    //do the same recursively
                    CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
                }
            }
        }
        function AreAllSiblingsChecked(chkBox) {
            //        var displayState = (expandAll == true ? "none" : "block");
            var parentDiv = GetParentByTagName("div", chkBox);


            var childCount = parentDiv.childNodes.length;
            for (var i = 0; i < childCount; i++) {
                if (parentDiv.childNodes[i].nodeType == 1) {

                    //check if the child node is an element node
                    if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
                        var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
                        //if any of sibling nodes are not checked, return false
                        if (!prevChkBox.checked) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

        function AreAllSiblingsUnChecked(chkBox) {
            //        var displayState = (expandAll == true ? "none" : "block");
            var parentDiv = GetParentByTagName("div", chkBox);


            var childCount = parentDiv.childNodes.length;
            for (var i = 0; i < childCount; i++) {
                if (parentDiv.childNodes[i].nodeType == 1) {

                    //check if the child node is an element node
                    if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
                        var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
                        //if any of sibling nodes are not checked, return false
                        if (prevChkBox.checked) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }
        //utility function to get the container of an element by tagname
        function GetParentByTagName(parentTagName, childElementObj) {
            var parent = childElementObj.parentNode;
            while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
                parent = parent.parentNode;
            }
            return parent;
        }
        function TreeviewExpandCollapseAll(treeViewId, expandAll) {
            var displayState = (expandAll == true ? "none" : "block");
            var treeView = document.getElementById('RFPPlaceHolder_TreeView1');
            if (treeView) {
                var treeLinks = treeView.getElementsByTagName("a");
                var nodeCount = treeLinks.length;
                for (i = 0; i < nodeCount; i++) {
                    if (treeLinks[i].firstChild.tagName) {
                        if (treeLinks[i].firstChild.tagName.toLowerCase() == "img") {
                            var currentToggleLink = treeLinks[i];
                            var childContainer = GetParentByTagName("table", currentToggleLink).nextSibling;
                            if (childContainer != null) {
                                if (childContainer.style.display == displayState) {
                                    eval(currentToggleLink.href);
                                }
                            }
                        }
                    }
                } //for loop ends
            }
        }
        
    
        function compareDate(sender, args)

        {
           
            var selectedDate = new Date();
            selectedDate = sender._selectedDate;
            var todayDate = new Date();
            if (selectedDate.getDateOnly() < todayDate.getDateOnly()) {
            sender._selectedDate = todayDate;
            sender._textbox.set_Value(sender._selectedDate.format(sender._format));
            sender._textbox.set_Value("");
            alert("Date Cannot be lesser then Req date");
            return false;
        }
        
         }

        function TreeviewExpandCollapseNode(childContainer, expandAll) {

            var inpSelectedNode = document.getElementById("RFPPlaceHolder_TreeView1_SelectedNode");


            var treeView = document.getElementById('RFPPlaceHolder_TreeView1');
            var treeLinks = treeView.getElementsByTagName("a");
            var currentToggleLink = treeLinks[inpSelectedNode];
            var displayState = (expandAll == true ? "none" : "block");
            if (childContainer != null) {
                if (childContainer.style.display == displayState) {
                    eval(currentToggleLink.href);
                }
            }
        }
        var links = document.getElementsByTagName("a");
        for (var i = 0; i < links.length; i++) {
            if (links[i].className == TREEVIEW_ID + "_0") {
            }
        }
        var checkBoxes = document.getElementsByTagName("input");
        for (var i = 0; i < checkBoxes.length; i++) {
            if (checkBoxes[i].type == "checkbox") {
                $addHandler(checkBoxes[i], "click", checkBox_Click);
            }
        }
        function IsValidChars(e) {
            e = e || window.event;
            ch = e.which || e.keyCode;
            var iChars = "!@#$%^&*()+=-\\\';,./{}|\":<>?";
            // var iChars = "\\\':*?/\"<>|";
            for (var i = 0; i < iChars.length; i++) {
                if (iChars.charCodeAt(i) == ch) {
                    //            document.getElementById('NotifyMsg').setAttribute('class', 'mandaMsg');
                    alert("Special characters are not allowed");
                    return false;
                }
            }
            return true;
        }
</script> 
       <script type="text/javascript">
          
           var oPopup = window.createPopup();
           function richToolTip(Target) {
               var lefter = event.offsetY + 0;
               var topper = event.offsetX + 15;
               oPopup.document.body.innerHTML = '<div style="removed: absolute; removed 0; removed 0;' +
                ' border: 2px solid black; ' +
                'font: normal 10pt tahoma; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,' +
                ' StartColorStr=gold, EndColorStr=#FFFFFF); padding: 10px;">' +
                'Node Name<hr style="border: 1px solid black;"> Node Name:' +
                Target.innerText +
                '<br/><img src="http://peoplewithmedicare.tmf.org/Portals/17/Icons/icon_excel.jpg" alt="Image"></img> <br/>' +
                '<hr style="border: 1px solid black;"></div>';
               oPopup.show(topper, lefter, 170, 120, RFPPlaceHolder_TVContent);
           }
           function AddAttributes() {
               debugger;
               var TreeNodes = RFPPlaceHolder_TVContent.getElementsByTagName('TABLE');
               for (var i = 0; i < TreeNodes.length; i++) {
                  
                   TreeNodes[i].onmouseover = function setToolTip() { richToolTip(this); };
                   TreeNodes[i]. önmouseout = function removeToolTip() { oPopup.hide(); };
               }
           }
          
    </script>  
    <link href="Styles/RFPStyle.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .style1
        {
            width: 88px;
        }
        .style2
        {
            width: 87px;
        }
        .style3
        {
            width: 79px;
        }
        .style4
        {
            width: 250px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="RFPPlaceHolder" runat="server">
    <div id="maincontent"><!-- InstanceBeginEditable name="EditRegion3" -->
<div id="maincontent-full" class="mainformcontainer">
<fieldset><legend><samp class="heading">RFP Details</samp></legend>
<table width="830" height="30px"border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="90">Customer Name</td>
    <td width="130"><asp:TextBox ID="txtCustomer"  ToolTip="Enter Customer Name"      
                        runat="server"  TabIndex="1" Width="170px" /></td>
    <td width="90">CRM-ID</td>
    <td width="130">
        <asp:TextBox ID="Txtcrm"  ToolTip="Enter CRM ID"      
                        runat="server"  TabIndex="2" Width="170px"/></td>
    <td width="90">Business unit</td>
    <td width="130">
        <asp:TextBox ID="Txtbusinessunit"  ToolTip="Enter Buisness unit"      
                        runat="server"  TabIndex="3" Width="170px" /></td>
  </tr>
  </table>
  </fieldset>
  <br />
<fieldset><legend><samp class="heading">Solution Area</samp></legend>
 
<table width="830" height="60px" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="90" class="style5">Solutions</td>
                           
    <td class="style1" > <asp:UpdatePanel ID="upConsolidationDeptSummary" runat="server">
                    <ContentTemplate> 
                        <asp:DropDownList runat="server" Width="175" height="23"   
                                     AutoPostBack="true"  ID="DDSolutions" TabIndex="4"  ></asp:DropDownList></ContentTemplate> </asp:UpdatePanel> </td>
    <td width="90" class="style5" >Sub-Solutions</td>
    <td class="style2" > <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate> 
                        <asp:DropDownList runat="server" Width="175"  height="23" 
                                     AutoPostBack="true"  ID="DdSubSolutions" OnSelectedIndexChanged="DdSubSolutions_Changed" TabIndex="5"  ></asp:DropDownList></ContentTemplate></asp:UpdatePanel> </td>
     <td class="style3">Category</td>
    <td width="130" class="style5">
        <asp:TextBox runat="server" ID="txtCategory" ToolTip="Enter Category" 
                  TabIndex="6" Width="170" style="margin-left: 0px"/></td>
  </tr>
  <tr>
    
    <td >Deal Size</td>
    <td class="style1" >
        <asp:TextBox runat="server" ID="txtDealsize" ToolTip="Enter Buisness unit"   
                 TabIndex="7" Width="170" /></td>
    <td>RFP.Req.Date</td>
    <td class="style2" ><asp:TextBox ID="txtdate" runat="server" Width="170px" 
            TabIndex="8" ></asp:TextBox><Ajx:CalendarExtender ID="CalendarExtender2" TargetControlID="txtdate"   runat="server" ></Ajx:CalendarExtender></td>
 
   
     <td class="style3" >RFP.Due.Date</td>
    <td ><asp:TextBox ID="txtEnddt" runat="server" Width="170px" TabIndex="9" ></asp:TextBox><Ajx:CalendarExtender ID="CalendarExtender1" OnClientDateSelectionChanged=" compareDate"  TargetControlID="txtEnddt"  runat="server" ></Ajx:CalendarExtender></td>
      
      </tr>
  </table>
  </fieldset>
  <br />
  <fieldset>
  <legend><samp class="heading">Table of Content Details</samp></legend>
   
     <div id="item_1" class="item">
    <div class="formtree">
  <table width="400" border="0" cellspacing="0" cellpadding="1">
  <tr><td>
  <asp:UpdatePanel ID="UpdatePanel2" runat="server">
   <ContentTemplate>
                
 <asp:TreeView ForeColor=Black  ID="TVContent"  runat="server"     ShowCheckBoxes="All"  ExpandDepth=0  >
 
 <Nodes > </Nodes>
  
     
 <LevelStyles>   <asp:TreeNodeStyle CssClass="tooltip_description" />     </LevelStyles>
              </asp:TreeView>
              </ContentTemplate></asp:UpdatePanel>
              </td>
          
              </tr>
</table>
  </div>
  </div>

  <div id="content-bottom">
  <table border="0" cellspacing="0" cellpadding="0" style="height: 53px; width: 200px">
  <tr>
  
             <td  align="left"    class="style4">
            <asp:Label runat="server" ID="Label1" Text="Selected Solution:"/>
            </td>
           
               <td align="left "class="style4" >              
            <asp:Label  runat="server" ID="lblSelectedSolution" />
             </td>
      </tr>
  </table>
  </div>
  </fieldset>
  <div class="buttons">
  <asp:ImageButton  ID="Btngenerate" OnClientClick="return ClientValidate();" 
          ImageUrl="images/generate.jpg" onclick="Btngenerate_Click" runat="server"  
          width="80" height="31" TabIndex="10" />  <img src="images/cancel.jpg" width="80" height="31" />  
  </div>
  </div>
<!-- InstanceEndEditable --></div>

</asp:Content>

And the style is here

div#qTip {
 padding: 3px;
 border: 1px solid #666;
 border-right-width: 2px;
 border-bottom-width: 2px;
 display: none;
 background: #999;
 color: #FFF;
 font: bold 9px Verdana, Arial, sans-serif;
 text-align: left;
 position: absolute;
 z-index: 1000;
}

Please help to solve it

Posted 15-Oct-12 19:23pm

Anusha Sridhar

Add a Solution

Comments

TheCoolCoder 16-Oct-12 4:59am

Are you using the qtips jquery plugin which can be found here?? Also please provide your source code for treeview binding, also i dont see any calls to js functions 'showToolTip', 'AddAttributes' etc. Do u have any codebehind lines that call them?? If you are pasting the source code here please do it selectively.

Anusha Sridhar 16-Oct-12 5:09am

yeah. I have the code behind whic is shown below :

protected void PopulateNode(TreeNode node1) {

decimal order = Convert.ToDecimal(node1.Value);

drText = dsSOW.Tables["Tableofcontents" + "$"].Select("Mappingcode='" + order + "'");

if (drText.Length > 0) {

foreach (DataRow drItem in drText) {

string ss = drItem.ItemArray[1].ToString();

string ss1 = drItem.ItemArray[0].ToString();

//decimal order1 = Convert.ToDecimal(ss1.ToString());

TreeNode node = new TreeNode(ss, ss1);

DataRow[] drText1 = dsSOW.Tables["Content" + "$"].Select("contentcode='" + ss1 + "'");

if (drText1.Length > 0) {

foreach (DataRow drItem1 in drText1)

{

node.ToolTip = node.ToolTip + drItem1.ItemArray[1].ToString();

} }

//DataRow[] drText1 = dsSOW.Tables["Content" + "$"].Select("Mappingcode='" + order1 + "'");

// if (drText1.Length > 0) // {

// foreach (DataRow drItem1 in drText1)

// {

// node.ToolTip = node.ToolTip+ drItem1.ItemArray[1].ToString();

// } // }

node1.ChildNodes.Add(node);

snode = node.Value;

if (snode != string.Empty) {

drText = dsSOW.Tables["Tableofcontents$"].Select("Mappingcode='" + snode + "'");

if (drText.Length > 0) {

PopulateNode(node); }

} } }

TVContent.Attributes.Add("OnClick", "OnTreeClick(event)");

//TVContent.Attributes.Add("onmouseover", "showToolTip(event)");

}

TheCoolCoder 16-Oct-12 7:32am

Take a look at the updated solution, Note sure if it helps though...

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mukesh_Chauhan · Answer 1 · 2012-10-15T19:56:00

Solution 1

I think, you should go with custom tooltip control that supports desired image and tooltip text in it.

Posted 15-Oct-12 19:56pm

Mukesh_Chauhan

Comments

Anusha Sridhar 16-Oct-12 2:59am

Can youplease show me an example.

TheCoolCoder · Answer 2 · 2012-10-15T22:32:00

I dont know if this exactly is causing all the problems you might be facing but i want to notify you one thing i have seen that you are doing wrong

<script src="Scripts/qTip.js" type="text/javascript">
    function showToolTip(e) {
    }
</script>

This usage is wrong. If you want that script block to function properly you should remove

src="Scripts/qTip.js"

from the script tag. Use seperate script tags

JavaScript

<script src="Scripts/qTip.js" type="text/javascript"></script>

<script  type="text/javascript">
    function showToolTip(e) {
    }
</script>

If possible i will look more into the code and update this solution.

I tried to add qtip tooltips to a sample treeview and it worked like charm replacing the default tooltips with its own without much hassle. I used jquery to add tooltips to the treeview. Debugging your code and script seemed very hard( n need more resources like more of your code) as you seem to be doing a lot of other things at the same time as displaying tooltip.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ForeColor="Black" ID="TVContent" runat="server" ShowCheckBoxes="All"
            ExpandDepth="0" CssClass="TVContentClass"><%--TVContentClass is used below in script--%>
            <Nodes>
                <asp:TreeNode ToolTip="Node 1" Text="Node1">
                    <asp:TreeNode ToolTip="Node 1 Level 2" Text="Node 1 Level 2"></asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
            <NodeStyle CssClass="NodeItem" /><%--class "NodeItem" is used below--%>
        </asp:TreeView>
    </div>
    <script type="text/javascript">        
        $('div.TVContentClass a[title].NodeItem').qtip({ style: { name: 'cream', tip: true} })
    </script>
    </form>
</body>
</html>

This approach will replace the treeview's default tooltips with qtip ones. If it is custom html you want to show as tooltips instead of Node.ToolTip you will need some more changes. can help you if that's the case, but i will need more time.

Hope this helps.