Posts

Smart Bubble Popups or Tooltips with jQuery Bubble Plugin

jQuery Bubble Popup – is a jQuery plugin to display smart and animated ‘bubble’ popups or tooltips, highly configurable, with a very long list of features and examples.

The plugin support HTML5 and it is fully compatible with IE6+, Firefox, Chrome, Opera, Safari, Webkit based browser (reKonq, Arora) and KHTML based browser (Konqueror).

ExamplesHTML image map / Add to shopping cart – e-commerce example.

jQuery bubble tooltips popups

Main Features:

  • create popups or tooltips for any DOM element
  • attach popups on the left, top, right or bottom side of the target element
  • set vertical or horizontal alignment
  • mouseover/mouseout events automatically managed
  • set custom popups events
  • create smart shadowed popups! (in IE too)
  • choose popup’s style templates at runtime
  • load asynchronously data inside Bubble Popups
  • make ‘selectable’ Bubble Popups
  • ‘tag’ pictures or add a Bubble Popups to image hotspots!
  • and more …

The plugin automatically manages popups position when browser window is resized.

Simple Tooltips Using jQuery & CSS

Simple Tooltips – create simple tooltips with jQuery and CSS with the markup as simple as possible but at the same time flexible enough to accommodate various scenarios you would run into.

There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. I would like to share how I’ve created mine today, and am also open to any critiques and suggestions for those jQuery ninjas out there. Lets take a look.

View DEMO

Simple tooltips with jQuery and CSS

Style My Tooltips jQuery plugin

Style-my-tooltips – is a really simple and lightweight (3Kb uncompressed) jQuery tooltip plugin to better style native browser tooltips.

By default, the script applies to any element with a ‘title’ attribute like links, paragraphs, images etc. but you can easily set it to affect only specific classes.

View DEMO

jquery tooltip plugin - style-my-tooltips

You can set the tooltip delay time and behavior via the 2 options:

$().ready(function() {
    $("[title]").style_my_tooltips({
        tip_follows_cursor: "on", //on/off
        tip_delay_time: 1000 //show tooltip delay     });
});

Easily Create Stylish Tooltips – Poshy Tip jQuery Plugin

Poshy Tip – a full-featured jQuery tooltip plugin that allows creating stylish tooltips in a unique and easy way.

Poshy Tip supports asynchronous loading of the tooltip content. By using callback, you can easily update asynchronously the content of the tooltip after it has been displayed. At demo page there is an example of loading  Flickr images in tooltip content.

View DEMOS

jQuery plugin - stylish tooltips Poshy Tip

Poshy Tip uses a single background image for scalable tooltips. It detects when a background image has been set for the tooltip container DIV and creates a scalable frame from it that wraps the inner contents of the tip.

Also support advanced positioning options, you can position the tips relative to the mouse cursor or to the target element and align them in every possible way horizontally and vertically, tooltips are always displayed in the browser viewport.

Colortip Tooltip with 6 Color Themes – a jQuery Plugin

Colortip Tooltip – a simple jQuery tooltip plugin which is going to convert the title attributes into a series of colorful tooltips.

6 color themes are available, red, blue, green, yellow, white and black, so you can easily match it with the rest of your design, or you can create your own colors in the plugin stylesheet.

View DEMO

Colortip Tooltip - jQuery plugin

You can also easily create your own tooltip designs by just including three additional style classes to your stylesheet and adding an element to the supported colors array in colortip-1.0-jquery.js

JQuery Tooltip Plugin – ChillTip

ChillTip is a simple and lightweight (0.8Kb gzipped) jQuery Tooltip Plugin that allows you to have a custom designed tooltip for your website.

Via CSS, you can easily change the tooltip background color, border color, tooltips width, and font size.

It can be used for span, img, anchor attributes and anything else that uses the title attribute. ChillTip has been tested and working in IE6+, Firefox, Google Chrome, Opera and Safari.

jquery tooltips plugin

MooTooltips – Good Looking Tooltips with MooTools

MooTooltips – JavaScript Tooltip with MooTools. Easily display tooltip messages from HTML elements, Ajax calls or text added manually.

View Examples

The script gives you the possibility to display tooltips either by passing the parameters on the rel parameter or by setting them manually when instanciating the class. When creating a class instance, you can set both types, inline tips and manually set ones.

Tooltip plugin for the jQuery – qTip

qTip – a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features. (Latest update and bug fixes on March 19th, 2009)

qTip provides you with tonnes of features like rounded corners and speech bubble tips, and it’s completely free under the MIT license.

qTip comes pre-packed with 5 elegant tooltip styles for use without any extra code. You can create your own styles simply by creating a custom style in the styles object and apply it using the style.name option.

Tested with the all the major browsers on the market today.

BeautyTips – jQuery Tooltips Plugin

BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec in order to dynamically draw tooltips.

These tips are highly configurable and can be triggered in many different ways. Tested with jQuery 1.2.6 and 1.3 on Firefox 3.x, Safari 3.x (also works on iPhone!), IE 6.x+, and Opera 8+.

For IE support, be sure to use the ExplorerCanvas library created by Google to support Canvas in Explorer. To fix z-index problems with form elements in IE6, include the bgiframe plugin on your page. BeautyTips will automatically recognize it and use it.

beauty tips - jquery tooltips