use jquery-tooltip with flot charts

Question

I was following example to use jquery tooltip. I have title showing up on the canvas. I am not sure how to get rid of that. When even i hover over the canvas i see that. Please see the image i attached

$(function() {

    var $chart = $( "#placeholder" ),
        ttPos = $.ui.tooltip.prototype.options.position;

    $.plot(
        $chart, 
        [{
            label: "Number of users",
            data:[
                [ 1, 2233 ],
                [ 2, 1294 ],
                [ 3, 1658 ],
                [ 4, 1603 ],
                [ 5, 1790 ],
                [ 6, 2103 ]
            ]
        }],
        {
            series: {
                lines: { show: true },
                points: { show: true }
            },
            grid: {
                hoverable: true
            },
            legend: {
                show: false
            }
        }
    );

    $chart.bind( "plothover", function( e, pos, item ) {

        var isTooltip = $chart.is( ":ui-tooltip" );

        if ( item !== null && isTooltip === false ) {

            var label = item.series.label,
                data = item.datapoint[1],
                content = label + "<br/><hr>" + data,
                evtPos;

            evtPos = $.extend( ttPos, {
                of: {
                    pageX: item.pageX,
                    pageY: item.pageY,
                    preventDefault: $.noop
                }
            });

            $chart.attr( "title", content  )
                  .tooltip({position: evtPos,
                            content: content})
                  .tooltip( "open" );

        }
        else if ( item === null && isTooltip === true ) {

            $chart.tooltip( "destroy" );

        }

    });

});

Answer 1

The jquery ui tooltip, by default, requires that the elements on which it pops-up have a title attribute (this is how jquery ui knows which elements to bind the event to). The first line of this code:

$chart.attr( "title", content  )
      .tooltip({position: evtPos,
                content: content})
      .tooltip( "open" );

is setting that attribute and is what you are seeing in your screenshot.

If you change it to:

$chart.tooltip({position: evtPos,
                content: content,
                items: '*'})
      .tooltip( "open" );

this should still allow the tooltip to popup without the title text. Fiddle here.

To be honest I find that code sample very obtuse. You'd be better served following this example in the flot documentation.