<div class="ac">
  <div>
    <button class="btn tooltip tooltip-nw" data-powertip="north west">NW</button>
    <button class="btn tooltip tooltip-n" data-powertip="north">N</button>
    <button class="btn tooltip tooltip-ne" data-powertip="north east">NE</button>
  </div>
  <div>
    <button class="btn tooltip tooltip-w" data-powertip="west">W</button>
    <button class="btn invisible" data-powertip="south">$$$I</button>
    <button class="btn tooltip tooltip-e" data-powertip="east">E</button>
  </div>
  <div>
    <button class="btn tooltip tooltip-sw" data-powertip="south west">SW</button>
    <button class="btn tooltip tooltip-s" data-powertip="south">S</button>
    <button class="btn tooltip tooltip-se" data-powertip="south east">SE</button>
  </div>
</div>
<button class="btn tooltip tooltip-w tooltip-mouse" data-powertip="<button type='button' class='close'>×</button> north west">click my tooltip</button>