CSDN博客

img goody9807

Creating Custom ToolTips

发表于2004/10/28 15:55:00  1056人阅读

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();" />
<!--This DIV is required to display the ToolTips-->
    <DIV id=results1></DIV>
    </BODY>
</HTML>

0 0

相关博文

我的热门文章

img
取 消
img