title: Tipsy won't recognize d3 elements in asp.net
body: <p>I am writing something ASP.NET and using d3 to graph a scatter plot, then tipsy to do mouseovers.</p>
  
  <p>This is inspired by this <a href="http://bl.ocks.org/1373263" rel="nofollow">example</a>.</p>
  
  <p>I have dumbed down my graph considerably so it is just this: <a href="http://jsfiddle.net/scottieb/D9Vjg/" rel="nofollow">http://jsfiddle.net/scottieb/D9Vjg/</a></p>
  
  <p>But when I put that code in ASP.NET it won't work!  If I put a button in and tie tipsy to that instead I have no issue generating the tooltip.</p>
  
  <pre><code>$('button').tipsy({
     html: false,
              live: true,
              fade: true,
              gravity: 'e',
              title: function () {
                  return "test";
              }
          });
  </code></pre>
  
  <p>For what it's worth, here's the code:</p>
  
  <pre><code>%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Reports_test.aspx.cs"
  Inherits="Pricing.App.Web.Reports_test" %
  
  asp:content id="bodyContent" contentplaceholderid="Body" runat="server"&gt;
  &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"&gt;&lt;/script&gt;
  
  &lt;div id="slidegraph"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  
  //$(function () {
          //var x_data = [1, 1.2, 1.4, 1.6, 1.8]; 
          var x_data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
          var y_data = [2, 4, 6, 7, 8, 9, 10, 12, 14, 15, 19, 20];
          var r_data = [5, 5, 5, 5, 10, 10, 10, 10, 4, 4];
          var c_data = [1, 1, 1, 1, 1, 2, 2, 2, 2, 2];
          var ipg_data = ['MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD'];
          var srp_data = [2, 4, 6, 7, 8, 9, 10, 12, 14, 15, 19, 20];
          var old_data = [2, 4, 6, 7, 8, 9, 10, 12, 14, 15, 19, 20];
  
          var data = [];
  
          for (i = 0; i &lt; x_data.length; i++) {
              data.push({ "x": x_data[i], "y": y_data[i], "c": c_data[i], "r": r_data[i]
                      , "ipg": ipg_data[i], "srp": srp_data[i], "old": old_data[i]
              });
          }
  
  
          var h = 400;
          var w = 400;
          var margin = 40;
  
  
  
          var x = d3.scale.linear().domain([0, 10]).range([0 + margin, w - margin]),
                  y = d3.scale.linear().domain([20, 0]).range([0 + margin, h - margin]),
                  r = d3.scale.linear().domain([0, 10]).range([3, 20]),
                  c = d3.scale.ordinal().domain([1, 7]).range(["#FF0000", "#00FF00", "#0000FF"
                          , "#FFFF00", "#00FFFF", "#FF00FF", "#FFFFFF"]);
  
          var vis = d3.select("#slidegraph")
                      .append("svg:svg")
                      .attr("width", w)
                      .attr("height", h);
  
          vis.selectAll("circle").data(data).enter().append("svg:circle")
          .attr("stroke", "black")
          .attr("cx", function (d) {
              return x(d.x);
          }).attr("cy", function (d) {
              return y(d.y);
          }).attr("fill", "red").attr("r", 15)
  ;
          $('svg circle').tipsy({
              html: true,
              //live: true,
              //fade: true,
              gravity: 'w',
              title: function () {
                  alert("gotcha!");
                  return "test";
              }
          });
  
     //     });
  
      &lt;/script&gt;
  /asp:content&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>It gets weirder.  In IE, nothing works.  In Firefox I get the tooltip, but it defaults to the top left of the screen, not next to the circles.  Sadly, I can't get chrome in our dev machine.</p>