Rickshaw Graph - Can not show Hover

Question

Please check attached image

The hover popup is not showing correctly.

Here is my css

.rickshaw_graph .detail .x_label { display: none }
.rickshaw_graph .detail .item { line-height: 2; padding: 0.5em;background-color: #8b0000 !important;z-index:10000}
.rickshaw_graph .detail .item.active { line-height: 2; padding: 0.5em;background-color: #8b0000 !important;z-index:10000}
.color-me {background-color: #8b0000 !important;z-index:10000}
.detail_swatch { float: right; display: block; width: 10px; height: 10px; margin: 0 4px 0 0 }
.rickshaw_graph .detail .date { color: #a0a0a0 }

and here is hover initialization

    var hoverDetail = new Rickshaw.Graph.HoverDetail( {
        graph: graph,

        xFormatter: function(x) {
            return 'Hello World';
        }
    } );

I am showing 3 timeseries graphs on page, which updated every few seconds.

Answer 1

You need to write/show us some further code because I tried some of your styling code (CSS) and there isn't any error.

Probably you have changed the CSS of rickshaw graph (or its parent) and the HoverDetail doesn't fully render.

Take a look at the HoverDetail example for styling your "detail" class.