Tooltips should only be used for small blocks of text (modal more suited to larger amounts of text) & will need js to position them on diff width screens, something like Popper

 

Tooltip top

<div class="tooltip-here">Hover me for a tooltip on top
  <span class="tooltip tooltip--top">Tooltip text here</span>
</div>
           

 

Tooltip bottom

<div class="tooltip-here">Hover me for a tooltip on the bottom
   <span class="tooltip tooltip--bottom">Tooltip text here</span>
</div>
            

 

Tooltip right

<div class="tooltip-here">Hover me for a tooltip on the right
    <span class="tooltip tooltip--right">Tooltip text here</span>
</div>
             

 

Tooltip left

 <div class="tooltip-here">Hover me for a tooltip on the left
     <span class="tooltip tooltip--left">Tooltip text here</span>
 </div>