https://github.com/wherejuly/69-abbr-title-tap
A drop-in replacement for <abbr title='...'> tag tap behavior on mobile devices, simulating native desktop hover tooltip effect.
https://github.com/wherejuly/69-abbr-title-tap
Last synced: 11 months ago
JSON representation
A drop-in replacement for <abbr title='...'> tag tap behavior on mobile devices, simulating native desktop hover tooltip effect.
- Host: GitHub
- URL: https://github.com/wherejuly/69-abbr-title-tap
- Owner: WhereJuly
- License: mit
- Created: 2025-07-06T10:27:34.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2025-07-09T15:01:39.000Z (12 months ago)
- Last Synced: 2025-07-09T16:24:06.144Z (12 months ago)
- Language: TypeScript
- Homepage:
- Size: 190 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# abbr-title-tap
This tiny package drop-in brings native-like `` hover behavior from desktop browsers to mobile. It displays the title text near the `abbr` tag on tap, and hides it when tapping elsewhere.
**Package Status**
[](https://sonarcloud.io/summary/new_code?id=WhereJuly_69-abbr-title-tap)
[](https://sonarcloud.io/summary/new_code?id=WhereJuly_69-abbr-title-tap)
[](https://opensource.org/licenses/MIT)
## Installation
**CDN (Browser)**
Add this in your `index.html` `head` tag. This makes it work as soon as your page loads.
```html
```
## Programmatic Usage
For programmatic usage install it via **npm**:
```bash
npm install abbr-title-tap
```
If not run vial HTML, then import the package code and styles like this.
```typescript
import 'abbr-title-tap/styles.css';
import 'abbr-title-tap';
```
Alternatively, the following will do the same as the `script` tag above in HTML. CSS should be imported as well. Note, either way, it runs a singleton so that just a single `TapDetector` class instance is run.
```typescript
import 'abbr-title-tap/styles.css';
import { Init } from 'abbr-title-tap';
new Init();
```
### Advanced
This is the manual initialization. This is not anymore a singleton, so ensure you do not create multiple redundant `TapDetector` instances.
```typescript
import { AbbrTapHandler, TapDetector } from 'abbr-title-tap';
new TapDetector(document, 'abbr', new AbbrTapHandler());
```
Formally you could listen to a tap event on any selector you want and provide your own custom tap handler. See the `TapDetector`, `ATapHandler` and `AbbrTapHandler` classes JSDoc hoverable blocks for more info and dig in the source.
You could also instantiate multiple `TapDetector` instances for handling different HTML selectors with a different handlers (not tested actually).
## Development
- [Requirements](./.a&cd/requirements.md)
### Running Tests
- Automated (Playwright): `npm run test:e2e` will run test from `tests/e2e` folder. Used for unit/integration tests;
- Manual acceptance testing: `npm run run:test:manual` will start the server on `localhost:3000` serving the html from `tests/manual/index.html` and scripts from `tests/.builds`. Used for manual acceptance testing. The script rebuilds the engaged dependencies to refresh imported files on each run.
## Maintenance
The package is written in TypeScript with the informative JSDoc blocks available on hover for public interface (e.g. in VS Code) for comfortable programmatic usage. The code is carefully crafted with TDD allowing simple extension. The project is production-ready and actively maintained.
### Contributions
Filling issues, questions in Discussions are all welcome.
## License
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.