Three Finger Tap JS
A small 4 KB library that attempts to mimic the three finger tap behaviour exhibited when you tap on a URL in Safari
A small (actually really small, around 4KB) library, that attempts to mimic the three finger tap behaviour exhibited when you tap on a URL with three fingers in Safari.
In Safari, when an user taps on a hyperlink using three fingers, a small preview window opens that shows the webpage the link would have taken the use to. This library attempts to mimic that behaviour. But instead of using the three finger tap gesture to open the URL preview window (as it is not available on all hardware), the library makes use of timed hover gesture to achieve the same.
You can install the library as a dependency over NPM or you can simply download the release from the dist folder here.
npm i three-finger-tap-js
1. Assign an appropriate class name to all the <a> (anchor) tags for which you wish to add the hover effect to.
<a href="https://wikipedia.org" class="three-finger-tap">Link</a>
2. Add references to threeFingerTap.min.js and threeFingerTap.min.css to the HTML page.
<link rel="stylesheet" href="../dist/css/threeFingerTap.min.css"> <script type="text/javascript" src="../dist/js/threeFingerTap.min.js"></script>
3. Call the library using the init method and see the magic happen.
threeFingerTap.init({
name : 'three-finger-tap',
hoverTimeout : 1000 // required only for desktop
})
You have see a demo of the library here.
For a detailed documentation, head over here.