Arrows / tooltips


   <a class="bubbled">
      Mouse over me! 
      <span class="arrow arrow-left-top hide">message in the bubble</span>
    </a>

.bubbled: class to the element containing the tooltips

.arrow: this class will create the box and the hover behaviour of the box

.arrow-left-top: this class will create the arrow of the box at the place you choosed.

.hide: this will hide the arrow box element, the box will appear only on over


lorem ipsum

arrow-bottom-right

lorem ipsum

arrow-bottom-center

lorem ipsum

arrow-bottom-left

lorem ipsum

arrow-right-bottom

- lorem ipsum

arrow-left-bottom

lorem ipsum

arrow-right-center

- lorem ipsum

arrow-left-center

lorem ipsum

arrow-right-top

- lorem ipsum

arrow-left-top

lorem ipsum

arrow-top-right

lorem ipsum

arrow-top-center

lorem ipsum

arrow-top-left