@skills-development-scotland/sds-tooltip

All about those tooltips!

Usage no npm install needed!

<script type="module">
  import skillsDevelopmentScotlandSdsTooltip from 'https://cdn.skypack.dev/@skills-development-scotland/sds-tooltip';
</script>

README

Image of SDS Logo

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,
});