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.
When referencing properties we already have collections for i.e. spaces, font-sizes, colors I've adopted the following pattern - https://github.com/99designs/asimov-panel/blob/master/_settings.scss#L36-L40

This means if we event want to change this in an app we simply

```scss
$settings: set((
  "spaces": (
    "tooltip": 10px
  )
));
```

rather than the current pattern

```
$settings: set((
  "tooltip": (
     "base": (
       "spacing":10px
    )
  )
);
```

This also means we can easily inventory all the values for a property with `@debug(get("spaces"));`