Using dijit/TooltipDialog with Table of Contents (TOC) Widget

DarrinBaldinelli — Sun, 12 Dec 2021 08:01:17 GMT

I'm trying to use the dijit/TooltipDialog (http://dojotoolkit.org/reference-guide/1.9/dijit/TooltipDialog.html) to display a message when the user hovers over a certain element in our Table of Contents Widget (http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109).

The problem is, the dynamically created elements inside the TOC don't have accessible IDs that I can use to know when the user hovers his/her mouse over a certain one. I'll give you an example. One of the labels in the TOC is named "Zoning", and I would like for the dijit/TooltipDialog to appear when the user hovers over the word "Zoning". Here's what the "Legend" looks like in the HTML after it's been dynamically generated:

<span class="agsjsTOCRootLayerLabel" data-dojo-attach-point="labelNode">Zoning</span>

This is the code I tried implementing:

    require([
        "dijit/TooltipDialog",
        "dijit/popup",
        "dojo/on",
        "dojo/dom",
        "dojo/domReady!"
            ], function (TooltipDialog, popup, on, dom) {
                var myTooltipDialog = new TooltipDialog({
                    id: 'myTooltipDialog',
                    style: "width: 300px;",
                    content: "<p>Disclaimer:",
                    onMouseLeave: function () {
                        popup.close(myTooltipDialog);
                    }
                });

                on(dom.byId('labelNode'), 'mouseover', function () {
                    popup.open({
                        popup: myTooltipDialog,
                        around: dom.byId('labelNode')
                    });
                });
            });

I tried using the "labelNode" attribute, but since it's not an ID, it does not work and the popup doesn't generate. Can anyone point me in the right direction here? Help is much appreciated. Thanks in advance!

By the way, this is all taking place inside Tax Parcel Viewer 10.2.

Re: Using dijit/TooltipDialog with Table of Contents (TOC) Widget

JonathanUihlein — Tue, 04 Feb 2014 18:03:57 GMT

From this page http://dojotoolkit.org/reference-guide/1.9/quickstart/writingWidgets.html :

"data-dojo-attach-point and data-dojo-attach-event are documented in detail on the dijit._TemplatedMixin page, but the important thing to note is that data-dojo-attach-event sets up a listener for events on the DOM nodes, and data-dojo-attach-point sets up a pointer to the DOM nodes."

http://dojotoolkit.org/reference-guide/1.9/dijit/_TemplatedMixin.html#dijit-templatedmixin

You can always edit the TOC widget to generate ids on particular elements if you desire.

However, you may not need IDs since you have a reference to the widget and subsequently, its children. (Also note that you have a reference to that span internally using the provided data-dojo-attach-point")

topic Using dijit/TooltipDialog with Table of Contents (TOC) Widget in ArcGIS JavaScript Maps SDK Questions

Using dijit/TooltipDialog with Table of Contents (TOC) Widget

Re: Using dijit/TooltipDialog with Table of Contents (TOC) Widget