abbr-touch

abbr-touch

abbr-touch is a tiny JavaScript library that makes the title attibute of <abbr> element touch accessible. It does so by utilising touchtap-event to only expose the functionality to touch-enabled devices, a custom touch handler can then be used to display <abbr>'s content any way you wish.

Installing

# via bower
bower install --save abbr-touch

# via NPM
npm install --save abbr-touch

Including

<!-- Bower -->
<script src="bower_components/abbr-touch/abbr-touch.js"></script>

<!-- NPM -->
<script src="node_modules/abbr-touch/abbr-touch.js"></script>

Usage

// default handler on document (alert)
abbrTouch();

// default handler, apply to descendants of #some-element
abbrTouch(document.querySelector('#some-element'));

// custom handler, apply to descendants of #some-element
abbrTouch(document.querySelector('#some-element'), myHandler);

function myHandler(target, title, touchX, touchY) {
  console.log(target);
  console.log(title);
  console.log(touchX);
  console.log(touchY);
}

A deeper example of usage can be found in demo.html. A live demo can be viewed on Growing with the Web.

See also

• touchtap-event

• abbr-fill.js