Sassy Annotations

A custom mixin for displaying annotations with line pointers. View Demo

Ever since we learned how to draw a triangle with CSS, designers have relied upon it for creating tooltips to annotate content. This was a great discovery and has its place but, but isn't applicable to all situations. The problem appears when tooltips need to stay out of the way of the content they are annotating. Standard speech-bubble-style tooltips need to be nestled next to what they are annotating to maintain context. Moving them out a bit means replacing the beloved css triangle pointer with a line.

At first glance, doing this sounds simple enough but in practice things can get complicated fast. For example, a typical use case for this typically involves the need to add annotations on top of their context rather than adjacent to. This means the typical approach of relative positioning has to be replaced with more verbose x,y positioning.

In an attempt to provide a solution for these less-than-edge-cases, I created Sassy Annotations. As the name implies, they require Sass (Scss) but that's it. They do use the :before and :after pseudo elements which means they will work in IE 8+.

To deploy a Sassy Annotation, you only need to add two HTML elements and small amount of CSS to position it.

<div class="annotation-one down-right">
    <div class="endpoint"></div>
    <p>Annotations are created by simply calling the @annotation mixin within a selector and defining the pointer orientation.</p>
</div>