Creating Custom ToolTips

来源：互联网发布：黑豹乐队知乎编辑：程序博客网时间：2024/05/16 05:04

The TreeView behavior provides a default ToolTip that displays when a user hovers over a TREENODE element. You may want your users to have more specific information than is provided by the default ToolTip (Use +/- to expand/collapse) accessed by the SHOWTOOLTIP attribute. You can accomplish this by creating three simple DHTML functions that use the ONHOVER and ONUNHOVER events to replace the default ToolTip.

The following sample shows what these methods might look like. The sample uses the TEXT attribute of the TreeNode object as the ToolTip text, but you could customize this to provide any information that you choose.
// ToolTip functions include starthover(), starttip(), and endtip()

    // ToolTip variables
    var myTimer;
    var nodeText;
    var tipX;
    var tipY;

function starthover()
{
var myVal = window.event.treeNodeIndex;
var myNode = oTree.getTreeNode(myVal);

    nodeText = myNode.getAttribute("text");
    tipX = window.event.clientX + 15;
    tipY = window.event.clientY + 15;

myTimer = window.setTimeout(starttip, 1000);
}

function starttip()
{
    results1.style.backgroundColor = "infobackground";
    results1.style.position = "absolute";
    results1.style.left = tipX;
    results1.style.top = tipY;
    results1.style.border = "1px solid black";
    results1.innerText = nodeText;

myTimer = window.setTimeout(endtip, 5000);
}

function endtip()
{
    results1.style.backgroundColor = "";
    results1.innerText = "";
    results1.style.border = "";
    window.clearTimeout(myTimer);
}
</HEAD>
    <BODY>
    <mytree:TREEVIEW id="oTree" TREENODESRC="state_city.xml"
    SHOWTOOLTIP="false" ONHOVER="starthover();" ONUNHOVER="endtip();" />

    <DIV id=results1></DIV>
    </BODY>
</HTML>