For want of a better word bubbles are tooltips. But we think bubbles sound better than tooltips!

Basic Bubble

This bubble is on the top

Lorem ipsum dolor sit amet, consectetur adipiscing elit

<div class="c-bubble c-bubble--top">This bubble is on the top</div>
<p class="c-paragraph">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p> 

Positions

Bubbles really need to be positioned with JavaScript to make them most useful. Blaze could have overridden all title attributes but that seemed too opinionated.

.c-bubble--right .c-bubble--top .c-bubble--bottom .c-bubble--left
<span class="c-bubble c-bubble--right">.c-bubble--right</span>
<span class="c-bubble c-bubble--top">.c-bubble--top</span>
<span class="c-bubble c-bubble--bottom">.c-bubble--bottom</span>
<span class="c-bubble c-bubble--left">.c-bubble--left</span>