# Primer Tooltips [![npm version](http://img.shields.io/npm/v/primer-tooltips.svg)](https://www.npmjs.org/package/primer-tooltips) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an aria-label attribute. This repository is a module of the full [primer][primer] repository. ## Install This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-tooltips` with this command. ``` $ npm install --save primer-tooltips ``` ## Usage The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. ```scss @import "primer-tooltips/index.scss"; ``` You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ ## Build For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. ``` $ npm run build ``` ## Documentation Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an `aria-label` attribute. **Attention**: we use `aria-label` for tooltips instead of something like `data-tooltip` because it is crucial that the tooltip content is available for screen reader users as well. However, `aria-label` **replaces** the text content of an element for screen reader users, so only use tooltip if there is no better way to present the information, or consider using `title` for supplement information. In addition, you'll want to specify a direction: - `.tooltipped-n` - `.tooltipped-ne` - `.tooltipped-e` - `.tooltipped-se` - `.tooltipped-s` - `.tooltipped-sw` - `.tooltipped-w` - `.tooltipped-nw` Tooltip classes will conflict with Octicon classes, and as such, must go on a parent element instead of the icon. ```html Tooltip North Tooltip North East Tooltip East Tooltip South East Tooltip South Tooltip South West Tooltip West Tooltip North West ``` #### Tooltips with multiple lines Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`. ```html Tooltip with multiple lines ``` #### Tooltips No Delay By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. `.tooltipped-no-delay` ```html Tooltip no delay ``` ## License [MIT](./LICENSE) © [GitHub](https://github.com/) [primer]: https://github.com/primer/primer [docs]: http://primer.github.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/