Tooltips

Tooltip Elements are most commonly used within the Question Component.

Many benefit programs are meant for people of a specific age group. Sharing your age will help us choose the programs that will be most helpful to you right now. The information you share for the purposes of public benefits screening will be anonymous.

<p>
  <button aria-describedby="aria-db-tooltip-age" class="c-question__info btn-text btn-link" data-js="tooltip" type="button">
    <svg aria-hidden="true" class="icon-2">
      <use xlink:href="#icon-info"></use>
    </svg>Here’s why we are asking.
  </button>
</p>
<div class="tooltip color-info-status animated fadeInUp" id="aria-db-tooltip-age">
  <p>Many benefit programs are meant for people of a specific age group. Sharing your age will help us choose the programs that will be most helpful to you right now. The information you share for the purposes of public benefits screening will be anonymous.</p>
</div>

Tooltip Usage

Global Script

The Tooltip Element requires JavaScript for showing and hiding the tooltip. To use the Tooltip Element through the global ACCESS NYC Patterns script use the following code:

<!-- Global Script -->
<script src="dist/scripts/AccessNyc.js"></script>

<script>
  var access = new AccessNyc();

  access.tooltips();
</script>

This will instantiate each Tooltip Element and attach event listeners for toggling.

Module Import

The Tooltip source exists in the NYCO Patterns Framework. Install the @nycopportunity/patterns-framework module to import the module.

import Tooltips from '@nycopportunity/patterns-framework/src/tooltips/tooltips';

let elements = document.querySelectorAll(Tooltips.selector);

elements.forEach(element => {
  new Tooltips(element);
});