Search code examples
javascriptjqueryprotovisjquery-tooltip

Protovis Jquery Tooltip problem

I would like to display data using Jquery tooltip in my web application.

I have followed the example on this website http://flowplayer.org/tools/demos/tooltip/index.html and have managed to display out a tooltip on a picture on my application.

However, I am generating some bulletchart using Protovis now and would like to display out the data when I mouse over on the bullet chart.

I want to know how do I edit to make the tooltip appear? Currently I am able to display using html tags, but what I really want is to display the tooltip using javascript code.

Below my codes for bullet chart:

var vis = new pv.Panel()
            .data(patientData)
            .width(140)
            .height(20)
            .right(10)
            .bottom(20)
            .left(5);

            var bullet = vis.add(pv.Layout.Bullet)
            .orient("left")
            .ranges(function(d) d.ranges)
            .measures(function(d) d.measures)
            .markers(function(d) d.markers);

            bullet.range.add(pv.Bar);
            bullet.measure.add(pv.Bar)
            .fillStyle("black")
            .text(function(d) "Current Month: "+ d.toFixed(1)+"%")
            .tooltip(); -->This give me an error!

Would appreciate any inputs. thanks!

Solution

  • The problem here is that you're trying to chain a jQuery function, .tooltip(), on a Protovis object, in this case a pv.Bar. That's not going to work. A couple of options:

    • If you're willing to change your jQuery plugin, you could probably follow this example, which uses Tipsy.

    • You could adapt the pv.Behavior.tipsy code shown here to use tooltip() instead. It looks like you could do this pretty easily, just by editing lines 33 and 64 to use a different plugin - the hard work in this code is creating a div element to attach the tooltip to, and that's the same for both plugins.