How to add a pop-up box onto this timeline graph

Question

I have made a horizontal timeline graph based on this nice example by Xin Yao from Freefrontend.com. For the html part of the code, the timeline data is included as list items on an unordered list, e.g.

<div class="history-block bg-96">
  <div class="cover"></div>
  <div class="year">1996 - 2006</div>
  <div class="title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
  <div class="timeline">
  <ul>
      <li><a href="" class="timelineYear">1996</a></li>
      <li><a href="" class="timelineYear">1997</a></li>

The timeline "sections" expand when clicked on and shrink when another is clicked... controlled by JS, e.g.

var viewportWidth, divWidth, tb;
$(function() {

    viewport = $('#container').innerWidth();
    tb = $('#thumbs');
    divWidth = tb.outerWidth();

    $('#container').mousemove(function(e)
    {
  tb.css({left: ((viewport - divWidth)*((e.pageX / viewport).toFixed(3))).toFixed(1) +"px" });
    });

$('.history-block').on('click', function(){
  $('.history-block').css('width', '300px');
  $('.history-block').find('.title').css('width', '260px');
   $('.history-block .timeline').hide(300);
    $(this).css('width', '600px');
    $(this).find('.title').css('width', '500px');
   $(this).find('.timeline').show(800);
  $('#container').mousemove(function(e)
    {
      tb.css({left: ((viewport - divWidth-300)*((e.pageX / viewport).toFixed(3))).toFixed(1) + 300 + "px" });
      });
});

$('.timeline ul li').on('click', function(){
    $(this).parent().blink();
});
});

The background images are included in the css file.

I've managed to get a tooltip working that shows some basic information for each year in the graph, but would rather have a popup window or similar that shows text + (stored) images related to the year when you hover the mouse over the year.

I tried using .popover instead of tooltip, but no luck. Can anyone suggest an approach or solution? Is this enough info??

The html file references are font-awesome.min.css, bootstrap.css and jquery.min.js

Thanks.