title: D3.js function to randomly call a tooltip in a loop
body: <p>I have created a d3.js map for a presentation using reveal.js and wanted to write a function that would randomly call the tooltip for one of the cities displayed in the map to have an animated title slide basically. However, I have no idea about how to start. Is there a certain way I should create a tooltip to use for the popup?</p>
  
  <p>The map uses the following to show the tooltip:</p>
  
  <pre><code>.on("mouseover", showTooltip)
  .on("mouseout", removeTooltip);
  
  function showTooltip(d) {
      $(this).popover({
          placement: 'auto top',
          container: '#map',
          trigger: 'manual',
          html: true,
          content: function () {
              return "&lt;span style='font-size: 11px; text-align: center;'&gt;" + d.City + "&lt;/span&gt;";
          }
      });
      $(this).popover('show');
  
      d3.select(this).style("opacity", 1);
  }
  
  function removeTooltip() {
      d3.select(this).style("opacity", opacityCircles);
  
      $('.popover').each(function () {
          $(this).remove();
      });
  
  }
  </code></pre>
  
  <p>I already have built a function that animates the cities by making them randomly grow and shrink.</p>
  
  <pre><code>function grow() {
      d3.select(this)
      .transition("growing").duration(1000 + 4000 * Math.random())
      .delay(function (d, i) {
          return Math.random() * 1000;
      })
      .attr("r", 8)
      .style("opacity", function (d) {
          return Math.min(1,
              0.2 + Math.random() * 2);
      })
      .transition("shrinking").duration(1000 + 3000 * Math.random())
      .attr("r", 2)
      .style("opacity", function (d) {
          return Math.min(1,
              0.2 + Math.random() * 2);
      })
      .each("end", grow);
  
  }
  </code></pre>
  
  <p>How can I combine these two to create a function that makes the circle representing a city grow and display its tooltip, then shrink and have the tooltip disappear?</p>