title: Method setAttribute not working all the time
body: <p>I have a code that when on hover, some text is displayed on a div at the top of the page depending on the selected Option.</p>
  
  <p>When I change the Option the text displayed on hover works just sometimes.</p>
  
  <p>I'm pulling the information from a SVG , and that is the information I'm changing.</p>
  
  <p>This is one of the values from the SVG:</p>
  
  <pre><code>&lt;path id="HI" data-info="&lt;div&gt;State: Hawaii&lt;/div&gt;&lt;div&gt;Capital: 
    Honolulu&lt;/div&gt;"
  </code></pre>
  
  <p>I'm changing it with this:</p>
  
  <pre><code>document.getElementById('HI').setAttribute('data-info','State: Alabama  
   &lt;/br&gt; Owner: xyz ');
  </code></pre>
  
  <p>And this method is called inside a .change(function()) so when I change the Option it updates the info.</p>
  
  <p>And this is my hover function</p>
  
  <pre><code> $("path, circle").hover(function(e) {
   $('#info-box').css('display','inline');
   $('#info-box').html($(this).data('info'));
    });
  </code></pre>
  
  <p>Again, this works just sometimes, so I'm not really sure why the info does not get updated all the time.</p>
  
  <p>Hope you guys can help.</p>