10 Stylish and Modern jQuery Tooltip Plugins


jQuery Tooltip Plugins

Writing your own implementation for creating jQuery Tooltip Plugins 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 10 stylish and powerful jQuery tooltip plugins for your next project!

Tooltipster

ToolTipster

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

qTip2

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.

  • Integrated Ajax support
  • Viewport re positioning
  • Modal tooltip
  • Built-in stacking properties for multiple tooltips with close proximity

Powertip

PowerTip

  • 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.
  1. Zebra Tooltips

Zebra Tooltips

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 behavior of tooltips showing when the user hovers on the element, tooltips may also be programmed to appear and disappear using the API.

  1. Tooltipsy

tooltipsy

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
  1. Tipr

Tipr

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.

  1. infoBox

infoBox

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 regular conversation/message boxes. These boxes will be aligned perfectly without moving out of the page unless you specify a larger width of the box.

  1. Protip

protip

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.

  • 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
  1. Toolgif

Toolgif

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.

 

  1. Shortify

Shortify

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.


 

Leave a Reply

Your email address will not be published. Required fields are marked *