如何将弹出窗口分配给二叉树视图的节点

Question

我刚刚创建了bootstrap popover鼠标单击以显示二叉树节点的详细信息.popover内部包含列表项。我使用setAttribute将数据传递给节点。但是它不起作用。我需要对其进行修复。所有代码以引起您的注意并更好地理解我的工作方式。谢谢

我使用按钮创建了单独的弹出窗口（未连接到树形视图）。我看到当我将其悬停时，数据正确传递到了弹出菜单。但是我需要将这些带有弹出窗口的数据分配给节点而不是按钮< / p>

Boostrap Popover

<div class="container">

        <a href="#" rel="popover" data-trigger="focus" data-popover-content="#list-popover">Show Popover</a>

        <div id="list-popover" class="hide">

                <ul class="nav nav-pills nav-stacked">
                    <li>
                        <label for="level">level:</label>
                        <input id="level" name="level" type="number" required>
                    </li>
                    <li>
                        <label for="column">column :</label>
                        <input id="column" name="column" type="number" required>
                    </li>
                    <li>
                        <label for="membershipNo">membershipNo :</label>
                        <input id="membershipNo" name="membershipNo" type="number" required>
                    </li>

                </ul>

                <div class="button">
                    <button type="button" class="btn btn-danger" st>Close</button>
                </div>
        </div>
<script>

        $('[rel="popover"]').popover({
            container: 'body',
            trigger: 'id', 
            html: true,
            content: function () {
                var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
                return clone;
            }
        }).click(function (e) {
            e.preventDefault();
        });
    </script>



    </div>

<div class="tree" >
        <ul>
            <li id="idl0cl1">
                <a href="#" id="aidl0cl1">Binary tree</a>

            </li>
        </ul>
    </div>

用于生成树节点的代码（将弹出窗口分配给节点）

 for (var y = 0; y < 2; y++) {
          val++;
     if (valuess[nm].column == val && valuess[nm].level == (x + 1)) {
            var node2 = document.createElement("LI");

            node2.setAttribute("id", "idl" + (x + 1) + "cl" + val);
            node2.setAttribute("class", "li");
            var node3 = document.createElement("A");


          node3.setAttribute("data-popover-content", "#list-popover");
          node3.setAttribute("class", "li");            
          node3.setAttribute("onclick", "mycall(" + valuess[nm].TreeId+")");

         node3.setAttribute("id", "aidl" + (x + 1) + "cl" + val);
         var textnode = document.createTextNode(valuess[nm].column);
         node3.appendChild(textnode);
         node2.appendChild(node3);
         node.appendChild(node2);
        document.getElementById("idl" + x + "cl" + (Math.round(val / 2))).appendChild(node);
         nm++;
         }
          else {
         }
       }