Replace tooltip id with tooltip class. Fix #86

demo/moulinrouge/__init__.py

@@ -229,7 +229,8 @@ def create_app():
     def raw_svgs():
         svgs = []
         for color in styles['neon'].colors:
-            chart = pygal.Pie(style=parametric_styles['RotateStyle'](color))
+            chart = pygal.Pie(style=parametric_styles['RotateStyle'](color),
+                              width=400, height=300)
             chart.title = color
             chart.disable_xml_declaration = True
             chart.explicit_size = True

demo/moulinrouge/tests.py

@@ -51,6 +51,30 @@ def get_test_routes(app):
         bar.zero = 1
         return bar.render_response()
 
+    @app.route('/test/xy_links')
+    def test_xy_links():
+        xy = XY(style=styles['neon'])
+        xy.add('1234', [
+            {'value': (10, 5),
+             'label': 'Ten',
+             'xlink': 'http://google.com?q=10'},
+            {'value': (20, 20),
+             'tooltip': 'Twenty',
+             'xlink': 'http://google.com?q=20'},
+            (30, 15),
+            {'value': (40, -5),
+             'label': 'Forty',
+             'xlink': 'http://google.com?q=40'}
+        ])
+
+        xy.add('4321', [(40, 10), {
+            'value': (30, 3),
+            'label': 'Thirty',
+            'xlink': 'http://google.com?q=30'
+        }, (20, 10), (10, 21)])
+        xy.x_labels = map(str, range(1, 5))
+        return xy.render_response()
+
     @app.route('/test/long_title')
     def test_long_title():
         bar = Bar()

pygal/css/base.css

@@ -47,7 +47,7 @@
   font-size: {{ font_sizes.value }};
 }
 
-{{ id }}#tooltip text {
+{{ id }}.tooltip text {
   font-family: monospace;
   font-size: {{ font_sizes.tooltip }};
 }

pygal/css/graph.css

@@ -111,15 +111,15 @@ I
   opacity: 1;
 }
 
-{{ id }}#tooltip rect {
+{{ id }}.tooltip rect {
   fill-opacity: 0.8;
 }
 
-{{ id }}#tooltip text {
+{{ id }}.tooltip text {
   fill-opacity: 1;
 }
 
-{{ id }}#tooltip text tspan.label {
+{{ id }}.tooltip text tspan.label {
   fill-opacity: .8;
 }
 

pygal/css/style.css

@@ -104,12 +104,12 @@
   fill: {{ style.foreground_light }};
 }
 
-{{ id }}#tooltip rect {
+{{ id }}.tooltip rect {
   fill: {{ style.plot_background }};
   stroke: {{ style.foreground_light }};
 }
 
-{{ id }}#tooltip text {
+{{ id }}.tooltip text {
   fill: {{ style.foreground_light }};
 }
 

pygal/graph/graph.py

@@ -102,16 +102,16 @@ class Graph(BaseGraph):
                 self.margin.left, self.margin.top))
         self.nodes['tooltip'] = self.svg.node(
             self.nodes['tooltip_overlay'],
-            id="tooltip",
             transform='translate(0 0)',
-            style="opacity: 0")
+            style="opacity: 0",
+            **{'class': 'tooltip'})
 
         a = self.svg.node(self.nodes['tooltip'], 'a')
         self.svg.node(a, 'rect',
-                      id="tooltip-box",
                       rx=self.tooltip_border_radius,
                       ry=self.tooltip_border_radius,
-                      width=0, height=0)
+                      width=0, height=0,
+                      **{'class': 'tooltip-box'})
         text = self.svg.node(a, 'text', class_='text')
         self.svg.node(text, 'tspan', class_='label')
         self.svg.node(text, 'tspan', class_='value')