title: Adding a tooltip to a dynamically-created SVG element
body: <p>Currently trying to use this tooltip: <a href="http://cbracco.me/a-simple-css-tooltip/" rel="nofollow">http://cbracco.me/a-simple-css-tooltip/</a></p>
  
  <p>I'm creating an SVG map with dynamically-created SVG circles depicting universities in different counties.  The problem is, I can't get my tooltip to show up.  Here's some of my code:</p>
  
  <pre><code>/**
   * Tooltip Styles
   */
  
  /* Add this attribute to the element that needs a tooltip */
  [data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
  }
  
  /* Hide the tooltip content by default */
  [data-tooltip]:before,
  [data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
  }
  
  /* Position tooltip above the element */
  [data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
  }
  
  /* Triangle hack to make tooltip look like a speech bubble */
  [data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
  }
  
  /* Show tooltip content on hover */
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after {
    visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  &lt;/style&gt;
  
  //json
  var data = {"counties":[{"id":"Tippecanoe", "title":"Purdue University", "r":"5"} ]};
  
  &lt;svg&gt;
      &lt;g id="counties"&gt;    
          &lt;path id="Tippecanoe" d="M146.7,210.6 L171.4,211.3 L190.2,211.4 L200.5,211.5 L200.3,234.4 L200.3,234.4 L200.3,234.4 L200.3,234.4 L200.0,251.9 L199.7,272.8 L169.1,272.3 L146.1,272.0 L146.4,251.5 L146.6,245.2 L146.8,226.0 L146.7,226.0 L146.7,213.2 Z"&gt;&lt;/path&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  
  //for each id, match up the json to the svg
  function getTitleById (id){
    for(var i = 0; i &lt; data.counties.length; i++){
      if (data.counties[i].id == id){
        return data.counties[i].title;
      }
    }
  };
  
  //same as above, but grab the radius
  function getRById (id){
    for(var i = 0; i &lt; data.counties.length; i++){
      if (data.counties[i].id == id){
        return data.counties[i].r;
      }
    }
  };
  
  //find center of each svg
  var mainSVG = document.getElementById("counties");
  $(document).ready(function() {
    $(".school").each(function() {
          var bbox = this.getBBox();
          var currentId = $(this).attr('id');
      var xc = Math.floor(bbox.x + bbox.width/2.0);
      var yc = Math.floor(bbox.y + bbox.height/2.0);    
  
  //create circle
  var circleNode = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      circleNode.setAttribute("cx", xc);
      circleNode.setAttribute("cy", yc);
      circleNode.setAttribute("class", "circle");
      circleNode.setAttribute("stroke-width", "4");
      circleNode.setAttribute("stroke", "black");
      circleNode.setAttribute("fill", "black");
      circleNode.setAttribute("title", getTitleById(currentId));
      circleNode.setAttribute("r", getRById(currentId));
      circleNode.setAttribute("data-tooltip", getTitleById(currentId));  //suspicious line
      mainSVG.appendChild(circleNode);
  });
  
  });
  </code></pre>
  
  <p>The circles are showing up correctly, just not the tooltip.  I think it may have to do with how I'm referencing <code>circleNode.setAttribute("data-tooltip", getTitleById(currentId));</code>, but when I inspect the wepbage itself, it shows up correctly as <code>data-tooltip="Purdue University"</code>. And yet no tooltip. </p>