10up Tooltip component

> An accessible tooltip component.

Installation

$3

npm install --save @10up/component-tooltip

$3

Clone this repo and import tooltip.js and tooltip.css from the dist/ directory.

API

This component accepts one argument, an optional callback.

$3

- Pass in an optional function to be executed with the tooltip.

Usage

$3

This is the markup template expected by the tooltip.

``html



`

$3

The styles can be imported into your existing codebase by using PostCSS imports, or by including the standalone CSS file in your project.

#### PostCSS Imports
@import '@10up/component-tooltip';

#### Standalone
Include the tooltip.css file from the dist/ directory.

$3

Run the tooltip with an optional callback and the correct mark up to generate the a11y tooltips.

#### NPM

`javascript
import Tooltip from '@10up/component-tooltip';


new Tooltip('.tooltip', () => {
console.log( 'my awesome callback' );
} );
`

#### Standalone


`html

`

`javascript
let myTooltip = new TenUp.tooltip('.tooltip', () => {
console.log( 'my awesome callback' );
} );
`

Demo

Example implementations can be found in the demo` directory.

Support Level

Active: 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome.

Like what you see?