20 Stylish and Modern jQuery Tooltip Plugins
jQuery Tooltip Plugins
Tooltips are a great option for showing extra information to your readers without cluttering the UI. According to Wikipedia, “Tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip appears—a small "hover box" with information about the item being hovered over.” Tooltips can have different styles and positions, and can carry several different types of content including text, HTML, images and videos. Feature-rich modern browsers offer great capabilities for tooltips like interactive tooltips, smooth animations, tooltip control and much more...
Writing your own implementation for creating stylish tooltips may require a lot of effort, testing and fixing platform compatibility issues will definitely consume time. If you don’t want to waste your precious hours, here is a list of 20 stylish and powerful jQuery tooltip plugins for your next project! These plugins are powerful, extensible, support different types of content, offer various animations and styling as well as inbuilt themes, and give you complete control over customization. Enjoy!
Tooltipster is a tiny, flexible, extensible, simple yet powerful jQuery plugin for creating modern tooltips. This plugin works well with HTML and plain text, and supports a variety of features, including:
- Support of image maps & SVG
- Custom themes & animations
- Multiple tooltips on a single element
- Smart positioning to reposition based on the viewport dimension
- Custom callbacks
- Extensible with plugins
- Support custom position
- Interaction with tooltip
qTip2 is the second generation of the most advanced qTip plugin for the ever popular jQuery framework. It is user friendly and provides you with tons of features like speech bubble tips and image map support. qTip2 allows you to use not only regular textual content, but also complex HTML from other elements on the site. It can even pull content in from other pages via jQuery's .ajax() functionality, and supports inbuilt titles as well as close button. Some of it’s other features include:
- Integrated Ajax support
- Viewport repositioning
- Modal tooltip
- Built-in stacking properties for multiple tooltips with close proximity
PowerTip is a flexible and easily customizable jQuery plugin for creating hover tooltips with some unique features like hover intent and tooltip queuing. This plugin offers simple configuration and also supports complex data in the tooltips. It is being actively developed and maintained, and provides a very fluid user experience. It features:
- Lots of APIs for control
- A much smoother user experience as it checks for hover intent, which means the tooltip doesn’t just open when the mouse happens to cross the element. Users have to hover over the element for a brief moment before the tooltip will open.
- Tooltip queuing for smooth transitions between two elements with tooltips
- Static tooltips as well as tooltips that follow the mouse
- Ability to let users mouse on to the tooltips and interact with their content
- Compatibility on any type of element
- Smart placement that (when enabled) will try to keep tooltips inside of the view port
- Ability to let users mouse on to the tooltips and interact with their content
- Smooth animation
Zebra Tooltips is a lightweight jQuery tooltip plugin featuring nice transitions and offering a wide range of configuration options. The plugin detects the edges of the browser window and makes sure that the tooltips always stay inside the viewport. Besides the default behaviour of tooltips showing when the user hovers on the element, tooltips may also be programmed to appear and disappear using the API. When shown programmatically, the tooltips will feature a "close" button which serves as the only way of closing tooltips opened this way.
By default, the plugin will use the "title" attribute of the element for the tooltip's content, but the tooltip's content can also be specified via the zebra-tooltip data attribute, or programmatically. The tooltips' appearance can be easily customized either through JavaScript and/or through CSS. Tooltips can be aligned left, center or right, relative to the parent element.
Tooltipsy is not just another jQuery tooltip plugin! This plugin provides extremely efficient tooltip functionality. Tooltipsy gives you complete control over the CSS, animation, and position. It features:
- Support of both html content and plain text
- The ability to function without CSS
- Ajax support
- Custom animations based on CSS3
- Custom trigger events
Tipr is a small and simple jQuery tooltip plugin. It works on almost any element, and it's free and open source. Tipr displays attractive tooltips, and it's around 2KB, CSS included. The tooltips can appear above or below almost any HTML element. It also reacts to the size of the viewport. The look of Tipr is set entirely via CSS, and it even comes with a few ready-baked themes.
infoBox is a tooltip style jQuery plugin for creating information signs on your web pages which will show information boxes on mouse over. The created information boxes will resemble reglar conversation/message boxes. These boxes will be aligned perfectly without moving out of the page unless you specify a larger width of the box. This plugin also features configurable properties like width and position. You can override the default values while initializing the plugin.
Protip is yet another versatile jQuery tooltip plugin. It was created for personal use, but was then released to the public. The only downside is that it’s not lightweight but according to the author it doesn't intend to be. This plugin creates interactive tooltips which can be placed in 49 different positions. The other features are:
- Live refresh of tooltip options
- Live element checking (element removed? -> Tooltip should disappear)
- Gravity: finds a better position if it won't fit to the screen
- DOM targets: append into the root or into another target element
- Placements: outside, inside, border or center
- Click activated and sticky tooltips.
- Custom HTML content
- In/Out delays
- Auto-hide
- Icon support
- Skins, sizes, schemes
- Animations support
- Custom event callbacks
Toolgif is a simple and lightweight jQuery tooltip plugin which allows you to embed GIF images as tooltips. This is quite useful when an animated sequence needs to be shown as a tooltip. One of the unique features of this plugin is that, when a GIF URL or tag is not specified, this plugin takes the text as tag and find gifs on Giphy. Giphy is your top source for the best & newest GIFs online, so this search is usually siccessful. If you wish to use your own GIF, specify either a gif URL or a tag name in the data-toolgif-url attribute in your HTML. The default settings like width, height and speed can be overridden while initializing the plugin.
Shortify is a very basic jQuery plugin that truncates a DOM element and shows its full text within a tooltip if its length exceeds the character limit. This is useful to accommodate long text in the UI. This plugin provides various positioning options for the tooltip and allows you to set when the truncation should begin. The tooltip styling is done using CSS, so you can easily change its look based on your website theme.
myTooltip is a powerful and modern jQuery tooltip plugin for creating animated, customizable tooltips. It works with input controls also. Features include:
- Fully configurable via HTML5 data attributes.
- Works with plain or complex HTML content.
- Works well with dynamically added elements.
- Custom offsets, templates, themes and animations.
- 6 built-in themes: default, danger, warning, info, success and light.
- Can be used on any DOM elements, not only a tag.
- Lots of options to enhance the tooltip
- Events to control to tooltip
- Support 3 actions hover, click and focus to open tooltip
mb.balloon is a fancy and clever jQuery tooltip plugin with some unique features for adding a balloon tip to any element. The tooltip content can be a simple string, a DOM element or AJAX content. On top of the common features of any tooltip plugin, this plugin offers several other unique features. Like,
- Opening the tooltip with overlay or without overlay.
- Displaying the tooltip on load with overlay for a specific duration.
- Rollover event to open a tooltip - user needs to rollover the mouse on the element to see the tooltip.
- Custom colour for the tooltip
Darktooltip is a simple and customizable jQuery tooltip plugin for creating tooltips with confirm option and various animation effects. The USP of this plugin is an option to show a confirmation dialog box in a tooltip and then allow for further action to be taken based on the tooltip response. Other features include:
- Compatible with any type of HTML content
- Supports confirm option with custom events
- Modal window option to open tooltip
- Size of tooltip can be configured
- Various animation effects
- In-built themes (dark and light)
- Defining the position of the tooltip (south, east, west or north)
jBox is a lightweight and multipurpose jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. This plugin is extendable and responsive. It allows you to position the tooltips on any elements, but the tooltips then change position based on browser scroll behaviour. Pretty net but that’s not all! Other features include:
- Interactive tooltips
- ESC key function for closing the tooltip
- Option to create tooltip that follows the mouse
- Ability to use themes to change the appearance
- Option to automatically close the tooltip after a specific duration
- Option to delay the opening of the tooltip
Previewer is a tiny jQuery plugin which allows the user to create tooltips for html content like text, images, and videos on mouse over or click event. While displaying a video as a tooltip, it also allows you to control (play, pause) the video from the tooltip container itself. You can easily modify the tooltip container style as it is defined at the time of initializing the plugin.
Aria tooltip is a tiny WAI ARIA 1.1 compliant jQuery plugin for creating accessible tooltips. This plugin is easy to customize due to it’s short but useful list of features. The plugin supports an advanced responsive mode, giving authors better control over the aspect and functionality of the tooltips on different devices. The plugin allows you to override default settings such as position and fading speed.
TinyTip is a very small tooltip jQuery plugin which doesn’t depend on CSS for styling the tooltip. It also does not force any styling over your tooltips; in fact, you can style your tooltips as desired. TinyTip allows you to display any content, text, html or Dom elements inside your tooltip.
ggpopover.js is a simple jQuery popover plugin extended from Bootstrap’s popover plugin. It supports 4 positions, title background color, title font color, title border color, content background color, content text color and arrow color without using images.
Flyout is a simple yet customizable jQuery plugin that helps you create a bootstrap popover (or tooltip-like floating popup) attached to any DOM element.
- Can be triggered via either click/tap or hover events.
- Custom position.
- Fade-in and fade-out animations.
- Supports html content.
jQuery Tooltip Basic is a simple jQuery plugin used for creating animated and hover-triggered tooltips from any content types. It uses CSS3 for animating the tooltips. It supports:
- Fade and Shake CSS3 animations
- Custom tooltip position: Right, Left, Top and Bottom.
- Works with any type of content
- Tooltips can be created in black, blue or green.
Conclusion
These jQuery tooltip plugins allows you to create different types of tooltips with great control over their style and position. These plugins support different type of content, whether it’s plain text or complex HTML content with images and videos. Inbuilt themes and customizable CSS help you to design the tooltips as per your website theme. We hope you found what you’re looking for!
