Creating Custom ToolTips

最新推荐文章于 2020-09-02 13:21:10 发布

goody9807

最新推荐文章于 2020-09-02 13:21:10 发布

阅读量1.2k

点赞数

分类专栏：大前端文章标签： function variables behavior methods include events

大前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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>