Responsive tooltips

This makes asimov tooltips responsive, thus addressing https://github.com/99designs/asimov-tooltip/issues/4

Give a tooltip a location preference value via `data-tooltip-location` (format is `direction-[alignment|justification]`):

```html
<span data-tooltip data-tooltip-location="down-center" title="lorem ipsum dolor sit amet lorem ipsum dolor sit amet">down-center</span>
```

Result: 

![image](https://cloud.githubusercontent.com/assets/131831/4352295/ce899424-4221-11e4-8bc3-6c17f62e3b07.png)

If it doesn't fit on the screen, it iterates though possible directions and alignments until it finds one that fits:

![image](https://cloud.githubusercontent.com/assets/131831/4352421/42db5392-4224-11e4-9d4b-6c1e7c0883e5.png)
 
If all directions and alignments fail, it will try to make the tooltip 'fluid'. This works well on mobile:

![image](https://cloud.githubusercontent.com/assets/131831/4352437/9133f094-4224-11e4-9873-085e2f5f96f3.png)
 
Possible locations
------------------------
```
up-left
up-center
up-right
up-fluid
  
down-left
down-center
down-right
down-fluid

left-top
left-middle
left-bottom

right-top
right-middle
right-bottom
```
a) what is this magic 7px value? Is it supposed to be `qgutter` or `space5`, or is it something different?
b) this is the only instance I've seen in our codebase where the `border` shorthand isn't `<size> <style> <color>`