<a
  id="test"
  class="btn tooltipped"
  data-position="bottom"
  data-delay="50"
  data-tooltip="I am tooltip">
    Hover me!
</a>

<a
  id="test1"
  class="btn tooltipped"
  data-position="bottom"
  data-delay="50"
  data-tooltip="I am a tooltip that is really really long so that I would definitely overflow off the screen if I were not smart!">
   Hover me!
</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div style="position: fixed; top: 50%; left: 50%;">
  <a
    id="test2"
    class="btn tooltipped"
    data-position="bottom"
    data-delay="50"
    data-tooltip="Fixed position tooltip">
     Hover me!
  </a>
</div>