Tooltips

Do not call this component directly as the abstraction would be overkill. Tooltips should always look like these through a combination of the modifier classes detailed below and in _tooltip.sass

Note:

  1. The distance from the containing element is in % so you may find that this needs to be tweaked dependent on where it's used.
  2. The widths for the left/right variations of the tooltips will need to be explicitly defined.

On Hover

I should appear above.

Above 

<div class='tooltip--container tooltip--hover' href='#'>
  Hover me
  <div class='tooltip tooltip--above icon--tapered-arrow-down--after'>I should appear above.</div>
</div>
I should appear below.

Below 

<div class='tooltip--container tooltip--hover' href='#'>
  Hover me
  <div class='tooltip tooltip--below icon--tapered-arrow-up--after'>I should appear below.</div>
</div>
I should appear to the left.

Left 

<div class='tooltip--container tooltip--hover' href='#'>
  Hover me
  <div class='tooltip tooltip--left icon--tapered-arrow-right--after'>I should appear to the left.</div>
</div>
I should appear to the right.

Right 

<div class='tooltip--container tooltip--hover' href='#'>
  Hover me
  <div class='tooltip tooltip--right icon--tapered-arrow-left--after'>I should appear to the right.</div>
</div>

On Focus

Above

I should appear above. 

<div class='tooltip--container' href='#'>
  <input class='tooltip--focus' type='text' placeholder='Click to focus' />
  <div class='tooltip tooltip--above icon--tapered-arrow-down--after'>I should appear above.</div>
</div>

Below

I should appear below. 

<div class='tooltip--container' href='#'>
  <input class='tooltip--focus' type='text' placeholder='Click to focus' />
  <div class='tooltip tooltip--below icon--tapered-arrow-up--after'>I should appear below.</div>
</div>

Left

I should appear to the left. 

<div class='tooltip--container' href='#'>
  <input class='tooltip--focus' type='text' placeholder='Click to focus' />
  <div class='tooltip tooltip--left icon--tapered-arrow-right--after'>I should appear to the left.</div>
</div>

Right

I should appear to the right. 

<div class='tooltip--container' href='#'>
  <input class='tooltip--focus' type='text' placeholder='Click to focus' />
  <div class='tooltip tooltip--right icon--tapered-arrow-left--after'>I should appear to the right.</div>
</div>