abbr-title-tap (npm package)
A drop-in enhancement for <abbr title="..."> that brings native-like hover tooltips to mobile users — with tap-triggered display and automatic hiding on outside tap. Zero-config, tiny, and production-ready.
This package simulates desktop browser behavior for <abbr title="..."> on mobile devices by revealing the title attribute text when tapped and hiding it on outside interaction. Just include the script and stylesheet or import it programmatically.
Motivation
Mobile browsers don’t show title attributes on tap by default. This package fixes that with a native-feeling interaction and makes mobile accessibility and usability of <abbr> consistent with desktop.
Key Features
- Drop-in enhancement: no changes required to your markup
- Works out-of-the-box via CDN or programmatic API
- Automatically hides on outside tap
- Responsive alignment of tooltips (left/right of screen midpoint)
- Zero dependencies, sub-kilobyte bundle size
Engineering Highlights
- Singleton-based lazy init with optional custom detector
- Supports custom selectors and custom tap handlers
- TDD-first codebase with type-safe interfaces
- JSDoc-documented public API
Technology
- TypeScript
- Native DOM + CSS variables: No framework dependency
- Playwright: Used for integration testing in CI
- ES Modules: Fully tree-shakable, ESM-first
Tooling & Development
- Playwright: Automated E2E testing for tap behavior
- BrowserSync: Manual testing server for cross-device validation
- ESLint + Less: Linting and style pre-processing built into CI
- tsx + esbuild: Efficient build and test command wrappers