HTML in tooltips and style tweaks

This allows us to optionally specify the #id of a node to place inside a tooltip via `data-tooltip-content`.

```
<p>
   Lorem <span data-tooltip data-tooltip-content="something">ipsum</span>
</p>
<div id="something">
   Hi!
</div>
```

Also included are some minor style tweaks. Adjusted default bg color to n-1, and spacing to something that works for both single text line and multi-line (list) content. 

![image](https://cloud.githubusercontent.com/assets/131831/4245269/c9c93a48-3a33-11e4-97e2-dc25dfcbc8db.png)

![image](https://cloud.githubusercontent.com/assets/131831/4245279/1710dbd0-3a34-11e4-9c3f-4983cfeaee0e.png)

Chucked in a .tooltip--spaceless variation that removes tooltip padding entirely if desired.

Existing title only tooltip functionality remains unchanged.
please keep the `$` convention for variables holding jquery objects. It's not always guaranteed to be the case, especially when dealing with vendor libs i.e. modal.

We should aim for consistency across our components to lower the barrier to entry.