opf/openproject

<div class="op-lookbook--tooltip-demo">
  <div>
    Right
    <span class="tooltip--right" data-tooltip="The content of the tooltip">
  <i class="icon icon-help2"></i>
</span>
  </div>

  <div>
    Bottom
    <span class="tooltip--bottom" data-tooltip="The content of the tooltip">
  <i class="icon icon-help2"></i>
</span>
  </div>

  <div>
    Left
    <span class="tooltip--left" data-tooltip="The content of the tooltip">
  <i class="icon icon-help2"></i>
</span>
  </div>

  <div>
    Top
    <span class="tooltip--top" data-tooltip="The content of the tooltip">
  <i class="icon icon-help2"></i>
</span>
  </div>
</div>

<style>
  .op-lookbook--tooltip-demo {
    width: 50vw;
    margin: 0 auto;
  }

  .op-lookbook--tooltip-demo div {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid #eee;
  }
</style>