<div class="ui-tooltip-wrapper">
  <button>Tooltip on top</button>
  <span class="ui-tooltip-content ui-tooltip-top">A pure CSS tooltip without JavaScript</span>
</div>

<div class="ui-tooltip-wrapper">
  <button>Tooltip on bottom</button>
  <div class="ui-tooltip-content ui-tooltip-bottom">
    <div class="ui-content-panel">
      <div class="ui-panel-body">
        <ul class="ui-list-group">
          <li><a href="http://arxiv.org/abs/1212.5605">Abstract on arXiv.org</a></li>
          <li><a href="http://arxiv.org/pdf/1212.5605">View preprint PDF</a></li>
          <li><a href="http://arxiv.org/e-print/1212.5605">Download TeX source</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>