SDS Tooltip

Adds functionality for tooltips.

Install

npm install @skills-development-scotland/sds-tooltip --save

Usage

Syntax

SDSTooltip.tooltip({
  selector: '.js-tooltip',
  eventSelector: '.js-tooltip__toggle',
  eventSelectorClasses: ['tooltip__toggle'],
  eventSelectorLinkClasses: ['link'],
  selectorContent: '.js-tooltip__content',
  eventSelectorClose: '.js-tooltip__close',
  eventSelectorCloseClasses: ['tooltip__close'],
  instanceIncrementOffset: 0,
});

• selector (optional)

  • Type: string
  • Default: .js-tooltip
  • The css selector for a tooltip instance

• eventSelector (optional)

  • Type: string
  • Default: .js-tooltip__toggle
  • The element css selector for the clickable element to show/hide the tooltip
  • Must be child of selector

• eventSelectorClasses (optional)

  • Type: string[]
  • Default: []
  • Styling classes to add to the event trigger (button)

• eventSelectorLinkClasses (optional)

  • Type: string[]
  • Default: []
  • Styling classes to add to the event trigger (anchor)

• selectorContent (optional)

  • Type: string
  • Default: .js-tooltip__content
  • The css selector for the content in a tooltip instance

• eventSelectorClose (optional)

  • Type: string
  • Default: .js-tooltip__close
  • The css selector for the close button within the content of a tooltip instance

• eventSelectorCloseClasses (optional)

  • Type: string[]
  • Default: []
  • Styling classes for the close button within the content of a tooltip instance

• instanceIncrementOffset (optional)

  • Type: number
  • Default: 0
  • The starting id number for matching aria labelledby and controls

Typescript

import { tooltip } from '@skills-development-scotland/sds-tooltip';

tooltip();

Javascript

<script src="scripts/sds-tooltip.js"></script>

SDSTooltip.tooltip({
  selector: '.js-app-tooltips',
  instanceIncrementOffset: 50,
});