@ithaka/bonsai/documentation/pages/components/tooltip.md

ITHAKA core styling

---
title: Tooltip
description: A tooltip is usually activated by a cursor or keyboard control. It is used to provide helpful information about an item in close proximity.
sass: ./scss/_tooltip.scss
js: ./js/bonsai.tooltip.js
foundation: http://foundation.zurb.com/sites/docs/tooltip.html
---

## How to use

### Basic tooltip

Tooltip functionality is enabled by wrapping text or actions in an html element that has a class of `.has-tip` and the `data-tooltip` data attribute.
The `title` attribute should contain the text that you want the tooltip to have.

``` html_example
<p>
    <span class="has-tip" data-tooltip title="I contain useful information!">Tooltips</span> should contain useful information.
    <button data-tooltip aria-haspopup="true" class="button secondary has-tip" data-disable-hover="false" tabindex="0" title="I'm a button tooltip. Look at my cursor!">
        This does something cool
    </button>
</p>
```

### Top, Bottom, Left, Right

By default tooltips point `.top`, but you can have them point `.bottom`, `.left`, or `.right` by adding that class to the tooltip

``` html_example
<p>
    Tooltips can point <span class="has-tip" data-tooltip title="Up high!">up</span>,
    <span class="has-tip bottom" data-tooltip title="Down here!">down</span>,
    <span class="has-tip left" data-tooltip title="Over here!">left</span>, or
    <span class="has-tip right" data-tooltip title="Now over here!">right</span>
</p>
```

### Secondary Tooltips

Secondary styling is available via the `.secondary` class. This is passed in via the `data-tooltip-class` data attribute.

``` html_example
<p>
    <span class="has-tip" data-tooltip data-tooltip-class="tooltip secondary" title="I am a secondary tooltip!">This tooltip</span> looks different.
</p>
```


## Accessibility
1. Focus should stay on the tooltip text box.
2. Displayed by keyboard focus or by an on-mouse event.
3. Becomes hidden by moving the mouse off the textbox or by pressing the Escape key
4. Open via click / focus, rather than hover. Hovering will not work with mobile or assistive technologies

## Guidelines
1. Tooltip should be fully visible when opened
2. Content should be clear and concise
3. Use and test standard icons
4. Add when to use which type (Black vs White)

## Platform Usage
Use whenever there is an icon without an associated label (e.g., move outline section up, copy citation to clipboard, etc.).

## Avoid
Use sparingly, if possible create features, functionality, and content that is self evident rather than having to explain it via a tooltip.