Morris graphs. Have custom tooltip when hover

Question

I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as a tooltip. I tried using the hoverCallback: but it doesn't seem to give me control over the particular element I am hovering over. I only get the content for that particular bar.

I have setup a JSBIN example for the same here:

When you hover over the bar it shows the index of the bar at the bottom. I want to show the content as a tool tip instead.JSBIN example

Overjoy

You have a typo in your JSBIN example. $(#row-content") is missing a " fixing your typo I can see the graphs, however when hovering over the bars I am not seeing where it shows the index of the bar at the bottom. – Braasch

Answer 1

Piece of cake. Demo and code:

<script type="text/javascript">
Morris.Bar({
    element: 'bar-example',
    data: [
        {y: '2006',a: 100,b: 90}, 
        {y: '2007',a: 75,b: 65}, 
        {y: '2008',a: 50,b: 40}, 
        {y: '2009',a: 75,b: 65}, 
        {y: '2010',a: 50,b: 40}, 
        {y: '2011',a: 75,b: 65}, 
        {y: '2012',a: 100,b: 90}
    ],
    hoverCallback: function(index, options, content, row) {
        return(content);
    },
    xkey: 'y',
    ykeys: ['a', 'b'],
    stacked: true,
    labels: ['Series A', 'Series B'] // rename it for the 'onhover' caption change
});
</script>

ARGUMENTS:

1: index: it represents record number i.e. from 0 to n records.

2: content: this is default hover div.

3: option : you data is inside this, before return(content);. do console.log(options) to view details.

4: row : to see the use of row below is an example.

hoverCallback: function (index, options, content, row) {
                     console.log(row);
                     var hover = "<div class='morris-hover-row-label'>"+row.period+"</div><div class='morris-hover-point' style='color: #A4ADD3'><p color:black>"+row.park1+"</p></div>";
                      return hover;
                    },

UPD:

For flying label, you need to add Morris CSS stylesheet to the code - demo

IMPORTANT NOTE

Flying labels works since version 0.4.3

Superb

Hey Ruben, this is the default behaviour. I don't want it in row-content div. That was just for figuring out what the various parameters in the callback contain. I want the data in a tooltip element right next to the mouse. – Overjoy

Have you a CSS sketch for the bubble? How it have to look like exactly, because it may change the play. Is ok for you just regular rectangle or it have to look like fancy callout? – Superb

A regular rectangle would be fine. I can change it later. – Overjoy

Can i hide datetime or format datetime when hover ? – Theophrastus

thank you for the remark on the flying label that's what i was looking for !! – Kenyatta

Answer 2

http://jsbin.com/finuqazofe/1/edit?html,js,output

{ y: ..., x: ..., label: "my own label"},'

...
Morris.Line({
    hoverCallback: function(index, options, content) {
        var data = options.data[index];
        $(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
    },
    ...
    other params
});

Jiujitsu

how to add this in donut chart? – Orthography