The What?
touchTips is a jQuery plug-in you can use to add responsive and mobile-friendly tool-tips to your site. This is a building block which can be added to the cornerstoneUX architecture. Unlike add-ons for other frameworks and architectures, touchTips can be used on any site by adding the style-sheets provided with the download. There is no limit to the number of tool-tips you can call on a page.
The Why?
While searching for a good solution to add tool-tips to a responsive site, I came across and article by Osvaldas Valutis on such a topic. While his approach did everything I needed, I was not a fan of the automatic invoking method being used. I have taken his concept and expanded it to allow for multiple ways to send content to the tool-tip for display as well as flexibility in the maximum width.
Plug-In Options
| Property | Default | Description |
|---|---|---|
| maxWidth | 360 | This is maximum width you would like the tool-tip to take up on larger screens. |
| tip | null | This is the content you would like to display in the tool-tip. If no value is passed, the tool-tip will display the contents of the data-touchTips element. You can either pass a text string to display or a selector or DOM element that you would like to display the HTML contents of. Additionally, you can pass a selector or DOM element in the data-touchTips value to disply the HTML contents of. |
| tipClass | 'touchTips' | This is the class applied to the tool-tip. |
Installation
To install touchTips is real easy. Just add a link to the touchTips.css file in the HEAD of your page. Add a link to the jquery.touchTips.js file below your link to jQuery, and add the initialization string to your page or external JavaScript file. Then, just add a data-touchTips attribute to the element(s) you would like to have trigger your tool-tip(s).
Examples
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae enim at leo feugiat porta. Phasellus vitae est non nisi suscipit finibus sed quis felis. Curabitur blandit arcu condimentum velit scelerisque rutrum. Praesent ultrices sit amet velit in interdum. Phasellus molestie purus facilisis erat consequat, eget accumsan ipsum interdum. Nullam tortor nunc, accumsan sed pellentesque venenatis, sodales a ex. Nullam laoreet ultricies lorem, egestas dignissim mauris euismod eget. Nulla interdum finibus libero, nec mollis felis accumsan quis.
Pellentesque eu tortor non arcu feugiat molestie id ultricies metus. Etiam id tempus diam. Vestibulum non nisi vel velit ultricies luctus. Nulla facilisi.
This is really cool also.
This is really cool.
Initialization
$('#js-test1').touchTips({ tip: $('#js-tool-tip-contents2') });Here we are passing the DOM element we would like to display the contents of in the tool-tip.
$('#js-test2').touchTips();Here the tool-tip will display the value of the
data-touchTipsattribute.$('#js-test3').touchTips();Here we are passing the DOM element we would like to display the contents of in the tool-tip in the value of the
data-touchTipsattribute.$('#js-test4').touchTips({ tip: 'string test' });Here we are passing the contents we would like to display in the tool-tip.