jqplot tooltip display on touch instead of jqplotDataHighlight or higlightMouseOver or highlightMouseDown

Question

I am using the jqplotDataHighlight option to display the tooltip on a chart on MouseOver.

$("#"+sTargetId).bind('jqplotcustomDataHighlight', 
                       function (ev, seriesIndex, pointIndex, data) {    
                         var chart_left = $("#"+sTargetId).offset().left,
                         chart_right = ($(window).width() - ($("#"+sTargetId).offset().left + $("#"+sTargetId).outerWidth())),
                         chart_top = $("#"+sTargetId).offset().top,
                           x = oPlot.axes.xaxis.u2p(data[0]),  // convert x axis units to pixels
                           y = oPlot.axes.yaxis.u2p(data[1]);;
                           var tooltipData = data[1]*scale;
                          $('#tooltip').css({left:chart_left+x, top:chart_top+y, marginRight:chart_right});
                          $('#tooltip').html('<span style="font-family: Arial;font-size:'+sTooltip+';font:bold;color:#000000;">' +sXDisplay+': '+ tooltipData + '</span>');
                         $('#tooltip').show();
                       });

            $("#"+sTargetId).bind('jqplotcustomDataUnhighlight', 
                     function (ev, seriesIndex, pointIndex, data) {
                         $('#tooltip').empty();
                         $('#tooltip').hide();
                     });

It works fine.On iPad, i want the tooltip to be displayed on some touch event.How can i implement it?

        // prop: highlightMouseOver
        // True to highlight slice when moused over.
        // This must be false to enable highlightMouseDown to highlight when clicking on a slice.
this.highlightMouseOver = true;
        // prop: highlightMouseDown
        // True to highlight when a mouse button is pressed over a slice.
        // This will be disabled if highlightMouseOver is true.
this.highlightMouseDown = false;

I have observed that only the above two options are available. How can I implement it on touchstart or so? Displaying the tooltip on doubleclick or any other event would also be helpful

score 0 · Answer 1 · answered Dec 24 '12 at 13:46

Maybe you already figured this out. Here's what works for me. I am using jquerymobile, in jquery.jqplot.js version 0.9.7r635 line No: 2290 change mousemove to vmousemove. If you are using cursor: {followMouse: true} , then things should work out of the box, I have a fixed position for my tooltip, but on mousemove the top and left values did not get applied so i hardcoded the top and left for the tooltip div .jqplot-cursor-tooltip to appear in the same position as it does on click. Although its not a very good solution but I havent seen weird behavior till now. Hope this helps !

jqplot tooltip display on touch instead of jqplotDataHighlight or higlightMouseOver or highlightMouseDown

1 Answers1