gistfile1.html

<div class="drones-bar"></div><p>A U.S. drone strike in northwest Pakistan has killed al-Qaida's second-in-command, officials from both countries have confirmed..."</p></div>
<div class="drones-bar"></div><p>Earlier Tuesday, U.S. officials said that al-Libi was killed by a CIA drone strike in Pakistan launched Monday."</p></div>
<div class="drones-bar"></div><p>The CIA had targeted Libi with three separate drone-launched missile attacks over three days, finally succeeding early Monday in strikes that destroyed a house and a vehicle, U.S. and Pakistani officials said."</p></div>

<div id="drones-blurb"></div>

<!--this is the tooltip, similar to your landline_tooltip_tmpl -->
<script id="drone-templ" type="text/jst">
<div id="drones-source">According to: <%%=source%></div>
<div id="drones-claim"><%%=claim%></div>
<div id="drones-outlet"><%%=outlet%></div>
</script>

<script type="text/javascript">

$(document).ready(function() {

//  here I have my data, which is a bunch of objects with variables like "outlet" and "claim" 
  var data=[
   {"statement_date":"5/29/2012","begin_date":"1/20/2009","end_date":"5/29/2012","deaths":"single digits","duration":1225,"timeline_start":"1/1/2004","days_from_start":1846,"claim":"The number of civilians killed in drone strikes in Pakistan under President Obama is in the 'single digits.'","source":"A senior administration official","outlet":"New York Times"},
   {"statement_date":"12/23/2011","begin_date":"1/1/2011","end_date":"12/23/2011","deaths":"a few","duration":356,"timeline_start":"1/1/2004","days_from_start":2557,"claim":"U.S. officials' 'acknowledged a few civilian deaths this year' in Pakistan","source":"U.S. officials","outlet":"Los Angeles Times"},
   {"statement_date":"11/7/2011","begin_date":"1/1/2011","end_date":"11/7/2011","deaths":"a handful","duration":310,"timeline_start":"1/1/2004","days_from_start":2557,"claim":"In Pakistan from CIA strikes, there was 'a handful” of civilian deaths in 2011.","source":"One U.S. official","outlet":"Los Angeles Times"},
   {"statement_date":"11/4/2011","begin_date":"6/18/2004","end_date":"11/4/2011","deaths":"60'","duration":2695,"timeline_start":"1/1/2004","days_from_start":169,"claim":"The agency [CIA] tells U.S. and Pakistani officials that there have been very few civilian deaths -- only 60 over the years.","source":"The CIA ","outlet":"Wall Street Journal"},
   ];

// here I am saying, make the stuff inside the drone-templ tooltip a template
    var tmpl = _.template($("#drone-templ").html())


   $(".drones-bar").hover(function(e) {
     var index = $(".drones-bar").index(this);

     // and here I say, on hover, fill "drones-blurb" with the appropriate data 
     $("#drones-blurb").html(tmpl(data[index]))
     },function (e) {
     }
   );

  });
 </script>