Skip to content
No description, website, or topics provided.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
demo
dist
src
tests
.browserslistrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.travis.yml
LICENSE
README.md
babel.config.js
package-lock.json
package.json
postcss.config.js
webpack.config.js

README.md

10up Tooltip component

An accessible tooltip component.

Support Level Build Status License: MIT

Installation

NPM

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

Standalone

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

API

This component accepts one argument, an optional callback.

Callbacks

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

Usage

Markup

This is the markup template expected by the tooltip.

   <!--
   A Tooltip with a span
   -->

   <div>
       <span class="a11y-tip">
           <span class="a11y-tip__trigger">
               Tooltip Trigger span
           </span>

           <span class="a11y-tip__help">
               Tooltip content goes here
           </span>
       </span><!--/.a11y-tip-->
   </div>

   <!--
   A Tooltip with a link
   -->

   <div>
       <span class="a11y-tip a11y-tip--no-delay">
           <a href="#tt_id" class="a11y-tip__trigger">
               Link w/top tooltip
           </a>

           <span id="tt_id" class="a11y-tip__help a11y-tip__help--top">
               Activate this link to go somewhere!
           </span>
       </span><!--/.a11y-tip-->
   </div>

   <!--
   A Tooltip with a button
   -->

   <div>
       <span class="a11y-tip">
           <button type="button" class="a11y-tip__trigger" aria-describedby="tt_id" aria-controls="tt_id">
               Button w/bottom tooltip
           </button>

           <span id="tt_id" role="tooltip" class="a11y-tip__help a11y-tip__help--bottom">
               Buttons do things on the page. Activate it to perform an action.
           </span>
       </span><!--/.a11y-tip-->
   </div>

   <!--
   A Tooltip with an input
   -->

   <div>
       <label for="test">
           Input with right tooltip
       </label>
       <span class="a11y-tip">
           <input id="test" placeholder="enter text" class="a11y-tip__trigger" aria-describedby="test_desc" type="text">

           <span id="test_desc" role="tooltip" class="a11y-tip__help a11y-tip__help--right">
               Enter something here. Text would be fine.
           </span>
       </span><!--/.a11y-tip-->
   </div>

   <!--
   Click to show/hide tooltip
   -->

   <div>
       <span class="a11y-tip a11y-tip--toggle">
           <span class="a11y-tip__trigger">
               Tooltip Toggle Trigger
           </span>

           <span class="a11y-tip__help">
               Tooltip content goes here
           </span>
       </span><!--/.a11y-tip-->
   </div>

CSS

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.

JavaScript

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

NPM

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


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

Standalone

Include the tooltip.js file from the dist/ directory and access the component from the gobal TenUp object.

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.

You can’t perform that action at this time.