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:
-
The distance from the containing element is in
%
so you may find that this needs to be tweaked dependent on where it's used. - 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>