Tooltip For Flot Bar Chart

i am using flot API to build bar charts. I am successful in plotting bar charts.But i am not getting tooltip for those charts.I have tried alot but i failed to achieve this. My cod

Solution 1:

Not sure what you were trying to achieve with

$.fn.UseTooltip = function () {
            $(this).bind("plothover", function (event, pos, item) {

But try replacing with this:

$("#placeholder2").on("plothover", function (event, pos, item) {
    if (item) {
// and removing trailling } in the end

Demo

Solution 2:

Your code is almost ok, there is just single peace is missing.

To understand what peace and why it is missing you should first understand what 'prototype' is and how jQuery use it. In short words - prototype is and object which defines default property values/method implementations for some other object. '$.fn' in jQuery is short reference to prototype. So calling

$.fn.UseTooltip = function () { ... }

will create default implementation for function UseTooltip for all object created by jQuery - e.g. now you can call $(someSelector).UseTooltip(some-parameters).

The important thing in your code is in the fact, that although you defined this function, you never invoked it. This means that you didn't attach tooltip to your bar chart. Simply add:

$("#placeholder2").UseTooltip()

This should solve you problem.