Best jQuery Tooltip Plugins & Tutorials with Demo

    Smart Image Tooltip with jQuery & CSS

    Smart Image Tooltip with jQuery & CSS

    Smart Image Tooltip is easy to use and setup plugin that can show images as tooltips for thumbnails or normal links. Plugin requires proper structure for the HTML used, and it supports adding all sorts of extra data that can be displayed inside the tooltip. Tooltip can be styled using CSS and it supports template for rendering. Plugin supports mobile/touch based devices to open tooltip on hover or click depending on the device or the plugin settings. There are many other settings to control plugin available.

    Features:

    • Preload image before displaying tooltip
    • Customizable preload animation and reposition tooltip
    • Various demos and examples to show how menu can be set
    • Full source files for both CSS and jQuery
    • Minimized CSS and JS files

    Progression.js : jQuery Real-Time Hints & Progress updates For Forms

    Progression.js : jQuery Real-Time Hints & Progress updates For Forms

    A jQuery plugin that gives users real time hints & progress updates as they complete forms.You must give your form a unique ID. You then need to add a data attribute of data-progression to each element that needs to be a step in the form progression.Then it shows a tooltip respective to every element  with progress report that how much form is completed.

    Blueprint : Tooltip Menu with CSS3 & JavaScript

    Blueprint : Tooltip Menu with CSS3 & JavaScript

    This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available. Using Modernizr’s touch detection, the menu will either react on hover or on click. Example media queries show how to adjust the style for smaller screens.

    jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

    jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

    A jQuery UI theme based on Twitter Bootstrap.This project was started to bring the beauty and ease-of-use of Twitter Bootstrap to jQuery UI widgets.In their original forms, jQuery UI and Bootstrap can’t coexist resulting in conflicts with both CSS classes and styles as well as JavaScript when you do try to use them. jQuery UI Bootstrap provides the JavaScript and CSS required to quickly start a project using both jQuery UI and Twitter Bootstrap.

    Our solution offers a custom version of Bootstrap compatible with jQuery UI as well as a Bootstrap-themed jQuery UI theme you can use to prototype your projects.

    CSS3 Product Grid Layout with JavaScript

    CSS3 Product Grid Layout with JavaScript

    A responsive product grid layout that comes with some UI details for inspiration. The product will rotate showing the backside of the item when the rotate button is clicked. Some examples of how tooltips can appear on hover or click are also included. Media queries can be used to resize the items in the grid or change the number of items in a row. Flexbox is used when supported.

    Smallipop : A versatile jQuery plugin for beautiful tooltips

    Smallipop : A versatile jQuery plugin for beautiful tooltips

    This jQuery plugin has been created because all the tooltips we tested didn’t meet our requirements.

    We wanted:

    • Pure css for the design. Fallbacks for older browsers and no images.
    • CSS Animations are supported.
    • Custom themes for different use cases.
    • The popup trigger can be positioned anywhere. The popup will be displayed at the body root, so the position won’t be affected by your layout.
    • Automatic orientation whereever the popup appears. The popup will try to stay in the visible area of the screen, even when scrolling or at the edges.
    • Only a single popup element in the document. Some plugins create a hidden popup for each trigger.
    • Custom options for each trigger. You can have 20 different popups with 20 different themes on one page if you like.
    • Small. Only ~ 3.5KB minified and ~ 2KB gziped.

    Google Maps Events

    Google Maps Events

    “Google Maps Events” is a nice way for show locations info when click on map’s markers. The script using XML files for show the information for each location. You can show the information in an accordion menu, in tabs menu, as modal window or in a simple div in any area of your pages! You can add the location coordinates in XML file or get the coordinates by address (geocoding)! The script coming with 24 demos and a useful tool for find the coordinates by address!

    Features:

    • Edit a XML file for set your information and map settings
    • You can using coordinates or address for set the markers on map
    • Show the location’s info in accordion, tabs, modal window or simple div
    • Show polylines, directions or just the markers on map
    • Styling polylines and directions lines (color, opacity, symbols like arrows etc)
    • You can use different markers (icons and dimensions) for each location in the same map
    • Editable tooltip when you put the mouse over a marker
    • Nice scrollbars for tabs and text (when are bigger than div’s height)
    • Complete documentation with step by step instructions
    • You can change the style very easy with simple CSS