❤
npm
Sign UpSign In

fr-tooltip

1.0.3 • Public • Published

permalink: /components/tooltip/ filename: tooltip title: Tooltip alpha: false sources:

A simple tooltip component usually consists of a button and a tooltip, with the button toggling the visible state of the tooltip when hovered or clicked on. By utilising a few relevant attributes we can improve the accessibility of the button and the tooltip.

role="tooltip" and aria-describedby are the key attributes to be added to the elements. The role applies to the tooltip and describes “a contextual popup that displays a description for an element”. Its counterpart aria-describedby defines the element that describes the relevant text (button), which in this case is the tooltip.

The ESC key will close any open tooltips and clicking off either element will do the same. Tooltips are hidden using the aria-hidden attribute to keep the accessibility tree and the DOM in sync.

The button is initially rendered as a span in the HTML, this enables us to progressively enhance the component and introduce the relevant element when JavaScript is available.

Install

Frtooltip is available to install with npm. Run with the --save flag to add the component your project dependencies.

npm install fr-tooltip --save

The component will then be available to import.

import Frtooltip from 'fr-tooltip';

Functional styles for the tooltip (tooltip.css) that are required to display the component states correctly should be referenced via a <link> in the <head> of your document, or can be integrated into your existing stylesheet.

You can read more about installing Frend components on our About page, including details on the functional CSS and JavaScript structure.

Usage

Tooltips rely on a pair of <span>s defining both the toggle element and the tooltip.

<span class="js-fr-tooltip">
    <span class="js-fr-tooltip-toggle">ipsam</span>
    <span class="js-fr-tooltip-tooltip">Tooltip describing ipsam</span>
</span>

Assign the function invocation to a variable.

var myTooltip = Frtooltip();

Methods

// remove all bindings and attributes when no longer needed
myTooltip.destroy();
 
// re-initialise as needed
myTooltip.init();

Options

var myTooltip = Frtooltip({
    // String - Container selector, hook for JS init() method
    selector: '.js-fr-tooltip',
 
    // String - Selector to define the tooltip element
    tooltipSelector: '.js-fr-tooltip-tooltip',
 
    // String - Selector to define the toggle element controlling the tooltip
    toggleSelector: '.js-fr-tooltip-toggle',
 
    // String - Prefix for the id applied to each tooltip as a reference for the toggle
    tooltipIdPrefix: 'tooltip',
 
    // String - Class name that will be added to the selector when the component has been initialised
    readyClass: 'fr-tooltip--is-ready'
});

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.3
    9
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.3
    9
  • 1.0.2
    1
  • 1.0.1
    1
  • 1.0.0
    1

Package Sidebar

Install

npm i fr-tooltip

Repository

github.com/frend/frend.co/tree/gh-pages/_components/tooltip

Homepage

frend.co/components/tooltip

Weekly Downloads

12

Version

1.0.3

License

MIT

Last publish

Collaborators

  • ffffrend
Try on RunKit
Report malware