Skip to main content

Patterns

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 btn-text btn-link" data-js="tooltip-control" type="button">Here’s why we are asking.&nbsp;<svg class="icon icon-info">
      <use xlink:href="#icon-info"></use>
    </svg></button></p>
<div class="tooltip 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>

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.

Cherry-picked Module Import

The ES6, CommonJS, and IFFE modules all require importing and object instantiation in your main script. You must pass a dom selection of the Tooltip Element to the instantiated class. A selector reference is stored in the class.

// ES6
import Tooltips from 'src/objects/text-controller/text-controller';

// CommonJS
let Tooltips = require('dist/objects/text-controller/text-controller.common');

<!-- IFFE -->
<script src="dist/objects/text-controller/text-controller.iffe.js"></script>

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

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