JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!-- trigger element. a regular workable link -->
<img id="download_now" src="http://jquerytools.org/media/img/downloadnow.png"/>
 
<!-- tooltip element -->
<div class="mycontent">
 
  <img src="/media/img/title/eye.png" alt="Flying screens"
       style="float:left; margin:0 15px 20px 0" />
 
  <table style="margin:0">
    <tr>
      <td class="label">File</td>
      <td>flowplayer-3.2.9.zip</td>
    </tr>
    <tr>
      <td class="label">Version</td>
      <td>2012-03-29</td>
    </tr>
    <tr>
      <td class="label">Size</td>
      <td>112 kB</td>
    </tr>
    <tr>
      <td class="label">OS</td>
      <td>all</td>
    </tr>
  </table>
 
  <a href="/release-notes">What's new in 3.2</a>
</div>

CSS

/* trigger button */
  #download_now {
    display:block;
    height:44px;
    margin: 0 auto;
    margin-bottom:30px;
    margin-top: 100px;
    overflow:hidden;
    text-indent:-999em;
    width:159px;
    cursor:pointer;
  }
 
  /* mouseover state */
  #download_now:hover {
    background-position:0 -44px;
  }
 
  /* clicked state */
  #download_now:focus {
    background-position:0 -88px;
  }
 
  /* tooltip styling */
  .mycontent {
    display:none;
    background:url(http://jquerytools.org/media/img/tooltip/black_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
  }
 
  /* a .label element inside tooltip */
  .mycontent .label {
    color:yellow;
    width:35px;
  }
 
  .mycontent a {
    color:#ad4;
    font-size:11px;
    font-weight:bold;
  }

JavaScript

$(function () {
    $("#download_now").tooltip({
        tipClass: "mycontent",
        events: {
				def: "click, dblclick",
			}       
    });
});