# fr-tooltip > Frend's accessible, modern tooltip component. Latest version **1.0.3** (published 2016-06-05) · MIT license · 0 weekly downloads ## Install ```sh npm install fr-tooltip pnpm add fr-tooltip yarn add fr-tooltip bun add fr-tooltip ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.3 | | Published | 2016-06-05 | | First published | 2016-03-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 628 | | Author | Frend | | Maintainers | ffffrend | | Keywords | tooltip, accessible, es2015 | ## Links - npm: https://www.npmjs.com/package/fr-tooltip - Repository: https://github.com/frend/frend.co/tree/gh-pages/_components/tooltip - Homepage: http://frend.co/components/tooltip - Issues: https://github.com/frend/frend.co/issues - npm.io page: https://npm.io/package/fr-tooltip ## Recent versions - 1.0.3 (latest) — 2016-06-05 - 1.0.2 — 2016-05-17 - 1.0.1 — 2016-03-11 - 1.0.0 — 2016-03-11 ## README --- permalink: /components/tooltip/ filename: tooltip title: Tooltip alpha: false sources: - title: HTML url: https://github.com/frend/frend.co/blob/gh-pages/_components/tooltip/tooltip.html - title: CSS url: https://github.com/frend/frend.co/blob/gh-pages/_components/tooltip/tooltip.css - title: JS url: https://github.com/frend/frend.co/blob/gh-pages/_components/tooltip/tooltip.js links: - title: Simple standalone toggltip widget pattern url: https://www.paciellogroup.com/blog/2016/01/simple-standalone-toggletip-widget-pattern/ - title: WAI ARIA Authoring Practices - Tooltip url: https://www.w3.org/TR/wai-aria-practices/#tooltip - title: WAI ARIA Roles - Tooltip url: https://www.w3.org/TR/wai-aria/roles#tooltip --- 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`. ~~~ js import Frtooltip from 'fr-tooltip'; ~~~ Functional styles for the tooltip ([tooltip.css](https://raw.githubusercontent.com/frend/frend.co/gh-pages/_components/tooltip/tooltip.css)) that are required to display the component states correctly should be referenced via a `` in the `` of your document, or can be integrated into your existing stylesheet. You can read more about installing Frend components on our [About page](http://frend.co/about/), including details on the functional CSS and JavaScript structure. ## Usage Tooltips rely on a pair of ``s defining both the toggle element and the tooltip. ~~~ html ipsam Tooltip describing ipsam ~~~ Assign the function invocation to a variable. ~~~ js var myTooltip = Frtooltip(); ~~~ ### Methods ~~~ js // remove all bindings and attributes when no longer needed myTooltip.destroy(); // re-initialise as needed myTooltip.init(); ~~~ ### Options ~~~ js 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' }); ~~~ --- _Source: https://npm.io/package/fr-tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._