1

It works properly in Chrome.

jsFiddle

D3 code:

$('svg circle').tipsy({ 
    gravity: 'sw', 
    html: true, 
    title: function() {
        var d = this.__data__;
        var pDate = d.date;
        return 'Topic: ' + "<br/>" +
            'Date: ' + d.date + "<br/>" +
            'Responses: ' + d.close; 
    }
});

CSS:

div.tooltip {   
    position: absolute;           
    text-align: center;           
    width: 100px;                  
    height: 18px;                 
    padding: 2px;             
    font: 12px sans-serif;        
    background: lightsteelblue;   
    border: 0px;      
    border-radius: 10px;           
    pointer-events: none;
}

What am I missing?

Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
  • 1
    I don't have any idea why it's acting so weird. But try [**`nvd3`**](http://nvd3.org/). Built using d3. They have built in tooltip and the charts are re-usable. – Unknown User Feb 19 '14 at 10:18
  • 1
    This is a known problem with Firefox: https://github.com/musically-ut/bootstrap/commit/f19aa0ab2e61ff836a29702a9fe3e186946d35ac Consider using a different library for showing tool-tips. – musically_ut Feb 19 '14 at 10:31
  • possible duplicate of [Tipsy tooltip positioning on d3 in firefox, IE](http://stackoverflow.com/questions/12263666/tipsy-tooltip-positioning-on-d3-in-firefox-ie) – Artjom B. Sep 06 '15 at 18:16

0 Answers0