I have to draw multiple lines and would like to plot a tooltip on the data point when mouse hovering. However, some might share the same (x, y). This results in overlapping points. They are plotted on top of each other.

It seems the "plothover" event only returns the data on the very top which is drawn at the last. As a result, the tooltip is only for that point. I want to draw multiple tooltips when multiple data points are hovered.

Has anyone encountered this issue before?

Thanks!

I have to draw multiple lines and would like to plot a tooltip on the data point when mouse hovering. However, some might share the same (x, y). This results in overlapping points. They are plotted on top of each other.

It seems the "plothover" event only returns the data on the very top which is drawn at the last. As a result, the tooltip is only for that point. I want to draw multiple tooltips when multiple data points are hovered.

Has anyone encountered this issue before?

Thanks!

• javascript
• jquery
• flot

Share Improve this question Follow asked Dec 17, 2013 at 0:56 alextcalextc 3,5291616 gold badges7171 silver badges119119 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Yes, looking at the source, flot will only find the top most point on the plothover. The simplest approach is just to do the work yourself. Here's a generic search for the plothover bind:

    if (item) {
        var content = item.series.label;
        var someData = plot.getData();
        for (var i = 0; i < someData.length; i++){
            if (someData[i].label == item.series.label){
                continue; // skip item's series...
            }
            for (var j=0; j < someData[i].data.length; j++){
                if (someData[i].data[j][0] == item.datapoint[0] &&
                    someData[i].data[j][1] == item.datapoint[1]){
                      content += ' ' + someData[i].label; 
                }
            }                
        }
        showTooltip(item.pageX, item.pageY, content);
    }

Fiddle example here.

---

Full Code:

$(function () {

    var plot = $.plot($("#placeholder"),[ 
        { data: [[0,0],[1,1],[2,2]], label: "Line One"},
        { data: [[0,2],[1,1],[2,0]], label: "Line Two"},
        { data: [[0,0],[0.5,1],[1,1],[2,3]], label: "Line Three"} 
    ], {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        grid: { hoverable: true, clickable: true }
    });

    function showTooltip(x, y, contents) {
        $('#tooltip').html(contents);
        $('#tooltip').css({
            top: y + 5,
            left: x + 5,
            display: 'block'});
    }

    $("#placeholder").bind("plothover", function (event, pos, item) {
        if (item) {
            var content = item.series.label;
            var someData = plot.getData();
            for (var i = 0; i < someData.length; i++){
                if (someData[i].label == item.series.label){
                    continue;   
                }
                for (var j=0; j < someData[i].data.length; j++){
                    if (someData[i].data[j][0] == item.datapoint[0] &&
                        someData[i].data[j][1] == item.datapoint[1]){
                          content += ' ' + someData[i].label; 
                    }
                }                
            }
            
            
            
            showTooltip(item.pageX, item.pageY, content);
        }
        else 
        {
            $("#tooltip").css('display','none');       
        }

    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.flotcharts/javascript/jquery.flot.min.js"></script>
<br/><br/>
<div id="placeholder" style="width:400px;height:300px;"></div>
<div id="tooltip" style="position: absolute;
            display: none;            
            border: 1px solid #fdd;
            padding: 2px;
            background-color: #fee;
            opacity: 0.80"></div>