Question

I’m using dojo’s event delegation to connect a Tooltip widget to dynamically generated dom nodes.

The Dojo site explains event delegation this way:

“The idea behind event delegation is that instead of attaching a
listener to an event on each individual node of interest, you attach a
single listener to a node at a higher level, which will check the
target of events it catches to see whether they bubbled from an actual
node of interest; if so, the handler’s logic will be performed.”

Following is my code implementation. It works beautifully … EXCEPT, the tooltip only shows AFTER the first mouse over event. When I first mouseover the node, the event fires perfectly, but the tooltip doesn’t render. It will only show the consequent mouseover events. On the first mouseover event, I can watch the Firebug console and see the xhr.get go to the database and get the correct data. If I comment out the tooltip and throw in a simple alert(), it works the first time.

Any suggestions on how to get the Tooltip to show on the first mouseover event? Thanks in advance!

<div class="col_section" id="my_groups">
    <div class="col_section_label">My Groups</div>
    <ul>
    <?php
        foreach($myGroups as $grp) {
            echo '<li><a class="myGroupLink" id="grp'.$grp['grp_id'].'">'.$grp['name'].'</a></li>';
        }
    ?>
    </ul>
</div>

<script>
    require(["dojo/on",
         "dojo/dom",
         "dijit/Tooltip",
         "dojo/_base/xhr",
         "ready!"], function(on, dom, Tooltip, xhr) {

    // Get Group ToolTip
    var myObject = {
        id: "myObject",
        onMouseover: function(evt){
            var grp_id = this.id;
            var content = '';
            xhr.get({
                url: "getGrpInfo.php",
                handleAs: "json",
                content: {
                    grp_id: grp_id,
                    content: "tooltip"
                },
                load: function(info) {
                    if(info == 0) {
                        content  = '<div class="grpToolTip">';
                        content += '    Information about this group is confidential';
                        content += '</div>';
                    } else {
                        content  = '<div class="grpToolTip">';
                        content += '    <img src="../ajax/getimg.php?id='+info.logo_id+'" />';
                        content += '    <div style="text-align:center">'+info.name+'</div>';
                        content += '</div>';
                    }

                    new Tooltip({
                        connectId: [grp_id],
                        label: content
                    });
                },
                error: function() {}
            });
        }
    };
    var div = dom.byId("my_groups");
    on(div,".myGroupLink:mouseover",myObject.onMouseover);
});
</script>

Answer 1

As usual, I was over-thinking the problem, focusing on event registration rather than on simply creating the tooltips when the page loads. So, it’s really stupidly simple:

1. query for the nodes

2. iterate through them and create the tooltips pointing to each node.

   var myGroupsList = query("a.myGroupLink");    // query nodes based on class
   array.forEach(myGroupsList,function(entry,i){ // iterate through
   
       var grp_id = entry.id;
       var content = '';
       xhr.get({                                 // get data via xhr.get
           url: "getGrpInfo.php",
           handleAs: "json",
           content: {
               grp_id: grp_id,
               content: "tooltip"
           },
           load: function(info) {
               if(info == 0) {
                   content  = '<div class="grpToolTip">';
                   content += '    Information about this group is confidential';
                   content += '</div>';
               } else {
                   content  = '<div class="grpToolTip">';
                   content += '    <img src="../ajax/getimg.php?id='+info.logo_id+'" />';
                   content += '    <div style="text-align:center">'+info.name+'</div>';
                   content += '</div>';
               }
   
               new Tooltip({                     // create tooltip
                   connectId: [entry.id],
                   label: content
               });
           },
           error: function() {}
       });
   });