A pure Javascript Plugin for an alternative hover function on mobile devices. It shows secondary information on »Taphold« and goes to a link on »Tap«.
When you touch an element, the cover is hidden and the secondary information is shown. If you release under 250ms the touch event is interpreted as a click and a redirection to the given link is triggered. Otherwise, if you hold longer, the event is interpreted as a »Taphold« and the cover is shown again on release. The user can read the secondary information while scrolling the page for example.
Download: https://github.com/vin-ni/hover-on-touch
Demonstration:
Plugin homepage:
Implementation:
Each element has an object wrapper with an info and a cover div. Add as many objects as you want.
<div class="object" data-triggerlink="https://www.example.com">
<div class="info">
//Put the secondary Information here
</div>
<div class="cover">
// Put the cover Informaton here
</div>
</div>This Plugin requires Hammer.js. Add it before the plugin in your html:
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="your/path/hoverontouch.js"></script>Screenshots:
