Responsive and Mobile-Friendly Tooltip. Based on the great jQuery Tooltip from Osvaldas Valutis.
Download Zepto and Zepto Tooltip.
In your web page, include Zepto library and Zepto Tooltip CSS theme and JavaScript files:
<link rel="stylesheet" href="css/smooth/zepto-tooltip.min.css" />
<script src="js/zepto.min.js"></script>
<script src="js/zepto-tooltip.min.js"></script>Assign the attribute rel="tooltip" and title="Enter your tip here" to any of body tags in HTML file where you want the tooltip to pop up when called. Set title value with your tip (use <strong>, <em> etc. to distinguish text fragments, but avoid block elements).
<abbr title="User Experience" rel="tooltip">UX</abbr>- It's responsive. It relies on a maximum width value when viewed on large screens, adopts to narrow environments and picks the best viewable position relatively to the target (top, bottom; left, center, right);
- It's mobile-friendly. It pops up when a call-to-action button is tapped and disappears when tapped on the tooltip itself;
- It's HTML formatting capable. Need to write some words in italic or so? No problem, this will work out.
Zepto Tooltip uses the grunt build system. Building Zepto Tooltip requires you to have node.js and npm installed.
Install grunt command line interface:
npm install -g grunt-cli
Clone the Zepto Tooltip git repo:
git clone git://github.com/ptech/zepto-tooltip.git
cd zepto-tooltip
Install node module dependencies:
npm install
Run grunt:
grunt build
There are many other tasks that can be run through grunt. For the complete list of available tasks:
grunt --help
Copyright (c) 2012 Present Technologies
Licensed under the Apache License, Version 2.0 (see LICENSE.txt).