Tooltips are mostly only of use on laptop and desktop computers. Tooltips don't tend to show on smartphones or tablets. However if you are building websites or webapps, they can prove to be a valuable method of attaching extra information to links. For this same reason, frontend web development frameworks like Bootstrap have always included tooltips as an optional module.
Our SuperTooltips stack can either attach tooltips to linked content placed within itself. Or you can use CSS selectors to target links in other parts of a page with tooltips. So this is a very flexible tooltip stack. Super!
Our SuperTooltips stack can either attach tooltips to linked content placed within itself. Or you can use CSS selectors to target links in other parts of a page with tooltips. So this is a very flexible tooltip stack. Super!
Example
Here is a block of content with some random links. If you mouseover the links, you will see the tooltips shown.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra sem nibh, et tempor mauris tempor at. In et enim volutpat, pharetra lorem a, varius erat. Fusce sollicitudin augue eu nisi malesuada, sed molestie lorem interdum. Praesent id congue massa. Donec at enim eu lacus facilisis imperdiet ac quis sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus finibus, odio eget dapibus suscipit, diam felis varius nulla, eu sodales nulla augue et arcu. Aenean imperdiet, metus id pulvinar maximus, ex dui rhoncus lorem, id malesuada tortor diam non quam. Ut commodo lacus id mi finibus, eu imperdiet leo iaculis. Vivamus vel erat felis. Fusce feugiat sit amet odio ac euismod. Sed cursus elit mi, eget bibendum eros sagittis eget. Donec nec turpis imperdiet nibh porta rutrum non sed mi. Donec vestibulum tincidunt sem, eget consequat magna malesuada vel. Cras molestie nulla ut arcu posuere tristique. In aliquam ac lectus eu rutrum.
Integer dapibus nisi purus, non consectetur dui varius gravida. Mauris laoreet fermentum lectus quis dictum. Suspendisse non maximus enim. Aenean sit amet faucibus augue. Nunc sed arcu auctor tellus auctor ultricies. Fusce ac sagittis lectus, vitae fringilla metus. In tempus justo sed odio facilisis convallis. Fusce ligula diam, facilisis eu euismod in, interdum a libero. Nullam efficitur tempus mauris, at vehicula enim sollicitudin et. Maecenas aliquam justo lobortis, luctus dui in, malesuada massa. Nulla facilisi. Aliquam magna massa, molestie nec est vitae, pharetra luctus nunc. Aliquam interdum scelerisque mattis.
Praesent nunc nibh, laoreet eu turpis vel, iaculis convallis nisi. Nam sollicitudin massa ac dui luctus blandit. Proin id turpis sit amet elit molestie placerat. Ut sit amet tempor magna. Mauris venenatis erat ac lorem auctor interdum. Praesent cursus tincidunt ipsum vitae eleifend. Aliquam suscipit pulvinar ullamcorper. Maecenas ac est aliquet, feugiat risus at, ornare velit. Etiam nec fermentum est. Ut a porta ex. Curabitur quis lacinia dolor. Nullam condimentum sed metus id cursus. Duis ante velit, pulvinar eget hendrerit tincidunt, sollicitudin sed est. Donec congue orci non sodales fringilla. Donec fermentum molestie felis cursus suscipit. Fusce ac hendrerit nisi.
In ultrices ornare venenatis. Praesent mollis orci et accumsan faucibus. Curabitur ac malesuada quam. Donec vel nisl at ligula tempus tincidunt ac id ante. Curabitur molestie et erat vel facilisis. Duis auctor mattis odio, ut gravida sem sodales quis. Suspendisse quis ipsum porttitor, vulputate augue at, ullamcorper nibh. Sed risus massa, placerat sit amet elit sed, elementum suscipit turpis. Ut cursus consectetur urna vitae pulvinar.
Nulla sit amet feugiat justo, dapibus blandit elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum urna dui, lobortis finibus sem tristique in. Vivamus dictum tortor nec lobortis fringilla. Donec a mi tincidunt, luctus dui at, blandit sem. Curabitur tempus vitae ex elementum auctor. Mauris fermentum est sem, quis sollicitudin augue tristique nec.
Integer dapibus nisi purus, non consectetur dui varius gravida. Mauris laoreet fermentum lectus quis dictum. Suspendisse non maximus enim. Aenean sit amet faucibus augue. Nunc sed arcu auctor tellus auctor ultricies. Fusce ac sagittis lectus, vitae fringilla metus. In tempus justo sed odio facilisis convallis. Fusce ligula diam, facilisis eu euismod in, interdum a libero. Nullam efficitur tempus mauris, at vehicula enim sollicitudin et. Maecenas aliquam justo lobortis, luctus dui in, malesuada massa. Nulla facilisi. Aliquam magna massa, molestie nec est vitae, pharetra luctus nunc. Aliquam interdum scelerisque mattis.
Praesent nunc nibh, laoreet eu turpis vel, iaculis convallis nisi. Nam sollicitudin massa ac dui luctus blandit. Proin id turpis sit amet elit molestie placerat. Ut sit amet tempor magna. Mauris venenatis erat ac lorem auctor interdum. Praesent cursus tincidunt ipsum vitae eleifend. Aliquam suscipit pulvinar ullamcorper. Maecenas ac est aliquet, feugiat risus at, ornare velit. Etiam nec fermentum est. Ut a porta ex. Curabitur quis lacinia dolor. Nullam condimentum sed metus id cursus. Duis ante velit, pulvinar eget hendrerit tincidunt, sollicitudin sed est. Donec congue orci non sodales fringilla. Donec fermentum molestie felis cursus suscipit. Fusce ac hendrerit nisi.
In ultrices ornare venenatis. Praesent mollis orci et accumsan faucibus. Curabitur ac malesuada quam. Donec vel nisl at ligula tempus tincidunt ac id ante. Curabitur molestie et erat vel facilisis. Duis auctor mattis odio, ut gravida sem sodales quis. Suspendisse quis ipsum porttitor, vulputate augue at, ullamcorper nibh. Sed risus massa, placerat sit amet elit sed, elementum suscipit turpis. Ut cursus consectetur urna vitae pulvinar.
Nulla sit amet feugiat justo, dapibus blandit elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum urna dui, lobortis finibus sem tristique in. Vivamus dictum tortor nec lobortis fringilla. Donec a mi tincidunt, luctus dui at, blandit sem. Curabitur tempus vitae ex elementum auctor. Mauris fermentum est sem, quis sollicitudin augue tristique nec.
Setup
Install SuperTooltips in the normal way and add a copy of the stack to your webpage. You can either place the content you want 'tool-tipped' within the SuperTooltips container, or use the settings and a selector name for content elsewhere on your page. Replacing the example selector names withbody a would target every link on a page.In all instances, it is the
title attribute value of a link that gets converted into tooltip text. Therefore if you are setting up links using the link dialogue window in RapidWeaver, this screenshot shows how and where you would setup your tooltip text:
SuperTooltips has a couple of other settings you might wish to adjust. All these are available within the SuperTooltips Settings. For example, you can choose the style of tooltip (six designs are available) or change the position that tooltips are shown on.
Please note that SuperTooltips "takes" the
title attribute of a link, to convert it into a tooltip. This title attribute is no longer available for plugins (like a lightbox or slider) to use. SuperTooltips is best to use for simple links and buttons that don't have any advanced functionality attached to them.