PageTalks

Introduction

An easy to use tooltip plugin of jQuery. You can skin it by modifying its css file and control its behaviors through many methods.

Demo

You can find a live demo here: http://pagetalks.com/share/jBubble/.

Download

  jBubble.zip (6.0 KiB, 387 hits)

Markups

<a href="#" id="a" title="this title cannot be ommitted!">Come on, find out what i can tell you!</a>

By default, the content of tooltip is taken from title attribute.

Installation

1. Include juqery.bubble.js and bubble.css
2. Call it after DOM Ready, e.g:

   $(".tooltip").bubble();

By default, it will listen for mouseover event to show tooltip.

Parameters

data_src (String)

Default : “title” – a propertity name that the plugin will find content for tooltip in.

alone (boolean)

Default: true – if only one tooltip is allowed to display at the same time

once (boolean)

Default: false - if the tooltip only shows up once.
Usualy, you directly pass a boolean value rather a parameter object. e.g, when #d is clicked, #c will show its tooltip without initialization.

$("#d").click(function() {
		$("#c").bubble(true);
		});

Public Methods

$.fn.showBubble

after initialzed by $.fn.bubble, you can manually invoke the tooltip by this method. e.g.

	$("#a").bubble();
	$("#b").click(function() {
		$("#a").showBubble();
	});
	

$.fn.clearBubble

clear the bubble effect on certain elements

Changelog

1.0

First Release of jBubble Plugin