jQuery UI Widgets Forums Chart Handling context menu when tooltip clicked

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 8 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • toquehead
    Participant

    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?


    Dimitar
    Participant

    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/


    toquehead
    Participant

    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;
                        }
                    }
                });
    • This reply was modified 8 years, 9 months ago by  toquehead.

    Dimitar
    Participant

    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/


    toquehead
    Participant

    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.


    Dimitar
    Participant

    Hi toquehead,

    I understand. Thank you for your feedback.

    Best Regards,
    Dimitar

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.