Handling context menu when tooltip clicked

[toqueheadParticipant]

I have a context menu handler installed via:

$chart.on('contextmenu', ...

Which works fine unless the user happens to r-click on the chart tooltip overlaying the chart. The tooltip is not a descendant of the chart, so the chart does not get the event. The tooltip div is not decorated with a specific css class that might be used to attach an event handler.

I can attach an event handler if I create a custom tooltip with a reliable selector, but that still misses the container chrome around the tooltip.

What is the best way to handle this event correctly?

[DimitarParticipant]

Hello toquehead,

You can assign a custom class to a series tooltip with the series property toolTipClass. You may then be able to use this class to attach the contextmenu event handler.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[toqueheadParticipant]

That mostly works, but if the user clicks on any of the chrome surrounding my custom tooltip, I still miss the event.

My solution is pretty involved for something so simple:

            // Need special handling for r-click on top of chart tooltip
            $(document.body).on('contextmenu', function (event) {
                // We have to look both ways for the table
                var $target = $(event.target);
                var $tooltip = $target.find('table.dashboard-chart-tooltip');
                if (!$tooltip.length)
                    $tooltip = $target.closest('table.dashboard-chart-tooltip');

                if ($tooltip.length) {
                    var tileID = $tooltip.data('tile-id');
                    var $tile = $('#' + tileID);
                    // Call our standard handler, supplying the tile div as this.
                    if ($tile[0]) {
                        onTileContextMenu.call($tile[0], event);
                        event.stopPropagation();
                        return false;
                    }
                }
            });

[DimitarParticipant]

Hi toquehead,

If you share a complete example we can test locally, we may be able to assist you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[toqueheadParticipant]

What I’m doing is pretty basic. I have a pie chart, and for each series I supply a toolTipFormatFunction that returns an HTML table. The pie chart renders that <table> inside a span inside a div. There are some padding/margins/borders (I don’t remember which) associated with the containing span and/or div. So if the user clicks on the space associated with the containers, the contextmenu event goes your span/div and not my table, but it is my table that gets decorated with the tooltipClass you recommended.

What I’ve got works and is probably reliable, but you might consider making it easier in future versions.

[DimitarParticipant]

Hi toquehead,

I understand. Thank you for your feedback.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts