Best jQuery Tooltip Plugins & Tutorials with Demo

    Responsive and Mobile-Friendly Tooltip

    October 28, 2012 | CSS2 / CSS3.0, Responsive, Web
    Responsive and Mobile-Friendly Tooltip

    Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used to present a tiny amount of hidden content (mainly explanatory, so-called tips), that pops up when user moves a cursor over or clicks (less common) on a special target.When working on my personal website, I was in need of a tooltip. I decided not to limit it just on a typical definition of a tooltip, but also make it a better occurrence using CSS and jQuery technologies.
    Key Features

    • It’s responsive.
    • It’s mobile-friendly.
    • It’s HTML formatting capable.
    Read More Demo

    Tooltipster : jQuery Tooltip Plugin

    August 29, 2012 | CSS2 / CSS3.0, HTML5, Plugins, Web
    Tooltipster : jQuery Tooltip Plugin

    Tooltipster is a lightweight (4,813 bytes minified) jQuery plugin that enables you to easily create clean, HTML5 validated tooltips.

    • Supports HTML tags inside the tooltip
    • Lightweight and degradable
    • Extremely flexible & fast to set up
    • Easily styled with 100% CSS – no images needed
    • Plays nicely with IE
    Read More Demo

    PowerTip : jQuery plugin that creates hover tooltips

    August 12, 2012 | Plugins
    PowerTip : jQuery plugin that creates hover tooltips

    PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.

    Features

    • Straightforward implementation
    • Supports static tooltips as well as tooltips that follow the mouse
    • Ability to let users mouse on to the tooltips and interact with their content
    • Mouse follow tooltips are constrained to the browser viewport
    • Easy customization
    • Works with keyboard navigation
    • Smooth fade-ins and fade-outs
    • Smart placement that (when enabled) will try to keep tooltips inside of the view port
    • Multiple instances
    • Works on any type of element
    • Supports complex content (markup with behavior & events)
    Read More Demo

    jQuery Hotspot Map – Powerful annotations and tooltips

    August 9, 2012 | Gallery, Plugins, Premium
    jQuery Hotspot Map - Powerful annotations and tooltips

    Hotspot is a plugin for easily adding annotations, text, or other stuff to an image, on the exact locations that you want. It’s an old concept with one exception. It comes with a powerful editor for precise drawing and positioning of the spots. You can also edit settings, see a preview of the final result and the editor will generate the HTML and JS code for you!

    One of the most powerful features of this plugin is the editor that it comes with. You don’t need to manually specify coordinates and dimensions of each spot on the image. It’s all visual – click to add a spot, or click and drag to draw a rectangle. Then dial the settings, click “Generate” and you will see a preview of the final result!

    Read More Demo

    Minijs : jQuery Plugins made easy

    May 9, 2012 | Plugins, Popup Window, Slider
    Minijs : jQuery Plugins made easy

    MiniJs.com provides a suite of simple and consistent jQuery plugins written in CoffeeScript including image slider, tooltip and notification.

    Read More Demo

    jQuery Frontier Calendar with Demo

    April 22, 2012 | Calendar, Plugins
    jQuery Frontier Calendar with Demo

    Full month calendar jQuery plugin that looks like Google Calendar.All UI elements such as next-month & previous-month buttons, add event form, edit event form, tooltips, etc, are not part of the calendar plugin. These are to be created by you so you can control how they look. Use the API hooks in your form elements to control the calendar.

    You may change the background image via the CSS file. By default all day cells have a linear fade png image for their background.

    Read More Demo

    Sweet Tooltip a jQuery & CSS3 Tooltips with Demo

    April 6, 2012 | Web
    Sweet Tooltip a jQuery & CSS3 Tooltips with Demo

    Sweet Tooltip is a jQuery & CSS3-based tooltip, not merely a one-style tooltip but seven. This imageless tooltips are crafted using CSS power, linear-gradient, box-shadow, text-shadow, :after and :before selector, etc. I created this tooltip with aim for having a style-independent tooltip.There are seven styles currently available in this package : Sweet Strong, Mini Slick, Big Grey, Nightly, Shiny Red, Soft Blue and Big Yellow. All style are inspired by dribbble’s posts.

    Read More Demo

    iPicture : A jQuery Plugin For Tooltip your Images With Demo

    April 3, 2012 | Drag & Drop, Gallery, jSON, Plugins, Slider, Web
    iPicture : A jQuery Plugin For Tooltip your Images With Demo

    iPicture, a jQuery plugin, is perfect for such cases and allows us to place tooltips over any desired location of images.

    Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content.There are several options for customizing the functionality including the ability to use different pointer images for each tooltip or their animation types.

    Also, iPicture has a handy initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag ‘n’ drops and the JSON output to be used in the code is created automatically.

    Read More Demo

    Bubble Point Tooltips with CSS3 & jQuery

    February 27, 2012 | CSS2 / CSS3.0, Web
    Bubble Point Tooltips with CSS3 & jQuery

    A cool bubble point tooltips with CSS3 & jQuery.

    Read More Demo

    Advanced jQuery Tooltip Plugin – qTip2

    February 13, 2012 | Ajax, Drag & Drop, Plugins, Popup Window, Web
    Advanced jQuery Tooltip Plugin – qTip2

    This plugin can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element (handy for drag ‘n’ dropped and animated items) or mouse.

    Tooltips can be styled completely, there is an optional Themeroller support and they can even be displayed as modal windows.

    It has built-in Ajax integration and can load any remote data. qTip2’s website has lots of creative demos including 3rd part service and various popular plugin integrations.

    Read More Demo