jQuery Bubble Popup v.3.0 Documentation

Copyright (c) 2012 Max Vergelli
jQuery Bubble Popup plugin is licensed under the MIT license; You are free to use jQuery Bubble Popup in commercial projects as long as the copyright header is left intact.

Description & Usage

“jQuery Bubble Popup” is a jquery plugin to display smart, animated & shadowed, “bubble” popups or tooltips with few lines of code in jQuery. The plugin support HTML5 and it is fully compatible with IE, Firefox, Chrome, Opera and Safari. It needs jQuery v.1.4.2 or later versions to run.

First of all, You have to add the following link and script tags with your proper paths, in the <HEAD> of the document

[...]
<link href="{...}/jquery-bubble-popup-v3.css" type="text/css" />
<script src="{...}/jquery-1.7.2.min.js"></script>
<script src="{...}/jquery-bubble-popup-v3.min.js"></script>
[...]

Then, to create a Bubble Popup, add the following script in any part of the <BODY> (assuming that exists at least a DOM element with “button” as class attribute)

<script type="text/javascript">
// create a bubble popup for each DOM element
// with class attribute as "button"
$(document).ready(function(){
          $('.button').CreateBubblePopup({
                      innerHtml: 'This is a Bubble Popup!'
          });
});
</script>

Download

Download the latest version at http://www.maxvergelli.com/jquery-bubble-popup/download/

Installation

  • Unzip the file “jquery-bubble-popup-v3.zip” and copy all the content to the root of your website:
    • copy the file “jquery-bubble-popup-v3.css” in the website’s folder that contains the css files.
    • copy the files “jquery-bubble-popup-v3.min.js” and “jquery-1.7.2.min.js” in the website’s folder that contains the javascript files.
    • copy the folder “jquerybubblepopup-themes” in the root of the website; don’t rename this folder because it contains the theme files used by the plugin as default; if you need to rename this folder then remind to set “themePath” option (see below) with the correct relative path.
    • open the file “test-jquery-bubble-popup.html” with your favorite editor and insert the relative path of the js and css files in the <link> and <script> tags in the head of the document as in the following example:<html><head>

      <link href=”{insert your css folder path}/jquery-bubble-popup-v3.css” rel=”stylesheet” type=”text/css” />

      <script src=”{insert your js folder path}/jquery-1.7.2.min.js” type=”text/javascript”></script>

      <script src=”{insert your js folder path}/jquery-bubble-popup-v3.min.js” type=”text/javascript”></script>

      [...]

  • Open the page “http://yourdomain.com/test-jquery-bubble-popup.html” in your browser to test the plugin.

Examples

Browser Compatibility

jQuery Bubble Popup was tested and supports the following browsers:

  • Internet Explorer >= 6.5 *
  • Firefox >= 3.5.x
  • Safari >= 5.0.x
  • Opera >= 10.x
  • Chrome >= 6.0.x
  • iCab >= 4.x
  • Webkit based browser (reKonq, Arora)
  • KHTML-based browser (Konqueror) **

* Shadowed Bubble Popups are displayed properly in all Internet Explorer versions; due to the incompatibility of certain animating functions of jQuery with IE 9 beta, the shadow is dropped only when the Bubble Popup is fully displayed. Others IE minor versions do not affect this, and the shadow is dropped instantly.

** In KHTML-based browser the only exception is that Bubble Popups are placed in the center of the target elements due to the incompatibility of jQuery with KHTML-based browsers; view jQuery browser compatibility.

Functions

.CreateBubblePopup()

This function has 2 overloads:

.CreateBubblePopup( { themePath : ‘…’ } )

It creates a Bubble Popup for each DOM element in the set of matched elements, with default options.

Note:

You can create obviously an empty Bubble Popup also with “.CreateBubblePopup()” without a themePath option; however I suggest you to set always a valid path for the theme, because if the path does not exists and for any impredictable reason the browser load it, you’ll get an error!

.CreateBubblePopup( options:Object )

It creates a Bubble Popup for each DOM element in the set of matched elements, with customized options.

Example:

// create a Bubble Popup for each element with
// the class attribute "myclassname"
$('.myclassname').CreateBubblePopup({ innerHtml: 'this is a text!' });

.IsBubblePopupOpen()

The function returns true if it is currently open the Bubble Popup associated to the first element in the set of matched elements.

Note: if the Bubble Popup is not found, returns null.

.GetBubblePopupLastDisplayDateTime()

The function returns a Date() object with Date and Time of the last display of the Bubble Popup associated to the first element in the set of matched elements.

Note: if the Bubble Popup is not found or no options were edited, returns null.

.GetBubblePopupLastModifiedDateTime()

The function returns a Date() object with Date and Time of the last modification of the Bubble Popup associated to the first element in the set of matched elements.

Note: if the Bubble Popup is not found or no options were edited, returns null.

.GetBubblePopupCreationDateTime()

The function returns a Date() object with Date and Time of the first creation of the Bubble Popup associated to the first element in the set of matched elements.

Note: if the Bubble Popup is not found, returns null.

.GetBubblePopupMarkup()

The function returns the HTML markup of the Bubble Popup associated to the first element in the set of matched elements.

Note: if the Bubble Popup is not found, returns null.

.GetBubblePopupID()

The function returns the ID attribute of the Bubble Popup associated to the first element in the set of matched elements.

Note: if ID is not found, returns null. The function returns the ID without “#” symbol.

.RemoveBubblePopup()

The function removes completely any Bubble Popup object and its markup from the DOM, that is associated to each element in the set of matched elements.

Note: the function returns the total count of the Bubble Popups removed, if no ones is removed, returns 0.

Example:

// remove any Bubble Popup associated to each element
// with class attribute "myclassname"
$('.myclassname').RemoveBubblePopup();

.HasBubblePopup()

The function returns true if a Bubble Popup is associated to the first element in the set of matched elements.

Note: if the target element does not have an associated Bubble Popup, then the function returns false.

.GetBubblePopupOptions()

The function returns an object (not an Array) that contains the options of a Bubble Popup that is associated to the first element in the set of matched elements.

Note: if the target element does not have an associated Bubble Popup or doesn’t exists options for the Bubble Popup, then the function returns null.

Example:

// return the options of a Bubble Popup that is
// associated to the first DOM element in the set
// of matched elements with class attribute "myclassname"
$('.myclassname').GetBubblePopupOptions();

.SetBubblePopupOptions( options:Object )

The function sets new options or replace entirely old options with the new ones of all Bubble Popups associated to the elements in the set of matched elements.

Note1: before using this function, you must call the function .CreateBubblePopup()

Note2: new options do not inherit settings from old options

.SetBubblePopupInnerHtml( innerHtml:String , [save:Boolean] )

The function sets permanently the “innerHtml” of all Bubble Popups associated to the elements in the set of matched elements;

it takes an optional parameter to know if the new “innerHtml” must be saved permanently or not, by default is true.

Note: before using this function, you must call the function .CreateBubblePopup()

.ShowBubblePopup()

This function has 2 overloads:

.ShowBubblePopup()

It shows a Bubble Popup that is associated to the first element in the set of matched elements.

.ShowBubblePopup( options:Object , [save_options:Boolean] )

It shows a Bubble Popup with new options and it takes an optional parameter to know if new options must be saved or not, by default “save_options” is false.

Example:

// set a Bubble Popup for each element with the class attribute "myclassname"

$('.myclassname').CreateBubblePopup({ innerHtml: 'this is a text!' });

// show the Bubble Popup that is associated to the first DOM element
// in the set of matched elements with class attribute "myclassname"
// and with "this is a text!" as message

$('.myclassname').ShowBubblePopup();

// show the Bubble Popup with new options but do not save them

$('.myclassname').ShowBubblePopup({ width: 100, innerHtml: 'text is changed!' }, false);

// show the Bubble Popup with old options

$('.myclassname').ShowBubblePopup();

.ShowAllBubblePopups()

The function shows all Bubble Popups that are associated to each element in the set of matched elements.

.HideBubblePopup()

The function hides a Bubble Popup that is associated to the first element in the set of matched elements.

.HideAllBubblePopups()

The function hides all Bubble Popups that are associated to each element in the set of matched elements.

.FreezeBubblePopup()

The function freezes a Bubble Popup associated to the first element of the set of matched elements; the Bubble Popup will not respond to mouse events (as mouseover/mouseout) until .UnfreezeBubblePopup() , .ShowBubblePopup() or .HideBubblePopup() are called.

.FreezeAllBubblePopups()

The function freezes all Bubble Popups associated to the set of matched elements;

Bubble Popups will not respond to mouse events (as mouseover/mouseout) until .UnfreezeBubblePopup() , .ShowBubblePopup() or .HideBubblePopup() are called.

.UnfreezeBubblePopup()

The function unfreezes a Bubble Popup associated to the first element of the set of matched elements.

.UnfreezeAllBubblePopups()

The function unfreezes all Bubble Popups associated to the set of matched elements.

Options

The options of each Bubble Popup can be grouped in a javascript object, then they can be passed as a parameter to the following functions

.CreateBubblePopup( options:Object )

.ShowBubblePopup( options:Object , [save_options:Boolean] )

.SetBubblePopupOptions( options:Object )

Example:

//create a javascript object with Bubble Popup options

var options =	{

					width: '100px',

					innerHtml: 'text inside the Bubble Popup!'

				};

// create bubble popups

$('.button').CreateBubblePopup( options );

// show the bubble popup of the first button

$('.button').ShowBubblePopup( options );

// set new options for all bubble popups

$('.button').SetBubblePopupOptions( options );

The following options change the way in which the popup is displayed :

position, align, distance, width, height, divStyle, tableStyle, innerHtml, innerHtmlStyle, tail, dropShadow, alwaysVisible, selectable

The following options control the mouse and popup events:

manageMouseEvents, mouseOver, mouseOut, openingSpeed, closingSpeed, openingDelay, closingDelay

The following options control the template, themes and other settings:

baseClass, themeName, themePath, themeMargins, afterShown, afterHidden, hideElementId

This is the complete list of all options with description:

name datatype default value description
position String ‘top’ it sets the Bubble Popup on the left, top, right or bottom side of the target element;possible values are’left’, ‘top’, ‘right’ or ‘bottom’.
align String ‘center’ it sets the Bubble Popup alignment along the side of the target element;possible values are’left’, ‘center’ or ‘right’ when position is ‘top’ or ‘bottom’otherwise ‘top’, ‘middle’ or ‘bottom’ when position is ‘left’ or ‘right’
distance Integer or String ’20px’ it sets the distance of the point from which the Bubble Popup comes
width Integer or String null it sets the width of the Bubble Popup, an integer “10″ or a string as “10px” is accepted;this option sets a CSS width property for the main <TABLE> in the markup template.
height Integer or String null it sets the height of the Bubble Popup, an integer “10″ or a string as “10px” is accepted;this option sets a CSS height property for the main <TABLE> in the markup template.
divStyle Object {} it is an object that contains CSS properties as {color: ‘#000000′, margin:’0px’}the CSS properties inside this object will be added to the main <DIV> tag in the markup template;by default it is an empty object.
tableStyle Object {} it is an object that contains CSS properties as {color: ‘#000000′, margin:’0px’}the CSS properties inside this object will be added to the main <TABLE> tag in the markup template;by default it is an empty object.
innerHtml String null The inner text inside the Bubble Popup, it can contains HTML tags.
innerHtmlStyle Object {} it is an object that contains CSS properties as {color: ‘#000000′, margin:’0px’}the CSS properties inside this object will be added to the <TD> tag container with “{BASE CLASS}-innerHtml” as class attribute in the markup template; by default it is an empty object.
tail Object {align:’center’,hidden: false} “tail” is an object that contains the following properties for the Bubble Popup’s tail

  • “align” (String) option sets the alignment for the tail and possible values are’left’, ‘center’ or ‘right’ when Bubble Popup’s position is ‘top’ or ‘bottom’ otherwise ‘top’, ‘middle’ or ‘bottom’ when position is ‘left’ or ‘right’;
  • “hidden” (Boolean) option can be true or false and toggle on or off the tail’s image.
dropShadow Boolean true Drop the shadow (true) or not (false) for the Bubble Popup.
alwaysVisible Boolean true if it’s true, the Bubble Popup maintains the position and alignment if it’s possible, also when the browser window is resized; otherwise the plugin changes (or restore back) the Bubble Popup’s position to make it always visible in the browser’s viewport, this works as well when browser window is resized.
selectable boolean false when the mouse is over the target element, a bubble popup appears; then, if “selectable” is true you will be able to select the content inside it; if the mouse goes out of the button OR the bubble, the popup will be closed.By default, this option is false, then you will not be able to select the content because when the mouse is immediately out of the button, the popup will be closed.
manageMouseEvents Boolean true by default, mouseout and mouseover events are automatically managed, however you can disable it and set this option to false; in this case, you’ll need to declare mouseover and mouseout events manually in your code for each target DOM element with a Bubble Popup. Disabling manageMouseEvents is useful when you need to develop customized functions to show or hide the Bubble Popup or to get the full control over that, however you will lose all the checkings that the plugin is running to position and align the popup, so be careful when you turn off this feature.If you need to add customized mouseover or mouseout events to the target element, you don’t need to disable managed events, because they do not affect managed events, then just add them with jQuery syntax as $(‘#element’).mouseover(function(){ … }); Note:when manageMouseEvents is false, the following functions don’t take effect:

.FreezeBubblePopup()

.FreezeAllBubblePopups()

.UnfreezeBubblePopup()

.UnfreezeAllBubblePopups()

also the following options don’t take effect:

mouseOver

mouseOut
mouseOver String ‘show’ it adds a managed mouseover event to the target DOM elementassociated with the Bubble Popup;possible values are ‘show’ or ‘hide”show’ : when mouse is over the target element, show the Bubble Popup associated with it’hide’ : when mouse is over the target element, hide the Bubble Popup associated with it
mouseOut String ‘hide’ it adds a managed mouseout event to the target DOM elementassociated with the Bubble Popup;possible values are ‘show’ or ‘hide”show’ : when mouse is out the target element, show the Bubble Popup associated with it’hide’ : when mouse is out the target element, hide the Bubble Popup associated with it
openingSpeed Integer 250 it sets the opening speed.
closingSpeed Integer 250 it sets the closing speed.
openingDelay Integer 0 it sets a delay in milliseconds when the Bubble Popup is opening.
closingDelay Integer 0 it sets a delay in milliseconds when the Bubble Popup is closing.
baseClass String ‘jquerybubblepopup’ it sets the base class name saved in the CSS file “jquery-bubble-popup.css”;generally You don’t need to edit this option, it is only useful if other CSS classes declared inside the document interfere with the main class of the Bubble Popup;in this case, You will need only to choose a new valid name for the base class and set this option with it, then You need to replace all occurrences of the base class name “jquerybubblepopup” inside the “jquery-bubble-popup.css” file with the new name. See the Template System for more information.
themeName String ‘azure’ it sets the theme for the Bubble Popup; all the themes are saved inside the folder “jquerybubblepopup-theme/” ; possible values are:azure, black, blue, green, grey, orange, violet, yellow, all-azure, all-black, all-blue, all-green, all-grey, all-orange, all-violet, all-yellow
themePath String ‘jquerybubblepopup-theme/’ it sets the relative path of the folder that contains all the themes
themeMargins Object {total: ’13px’,difference: ’10px’} it is an object that contains the following properties

  • “total” is the total margin from the target element
  • “difference” is the margin difference

edit “themeMargins” attributes only if you need to edit or create a new theme;

See the Template System for more information.
afterShown Function function(){} It sets a callback function to execute when Bubble Popup is opened; You can set it as$(‘.button’).CreateBubblePopup({innerHtml: ‘This is a Bubble Popup!’,afterShown: function(){alert(‘Bubble Popup is open!’);}});
afterHidden Function function(){} It sets a callback function to execute when Bubble Popup is closed
hideElementId (String) Array [] Insert in the array all IDs of the elements that You want to hide; it is useful if any element interfere with a Bubble Popup. By default, it is an empty array.

How jQuery Bubble Popup works

When a Bubble Popup is created with the following function…

$(‘#mybutton’).CreateBubblePopup({ innerHtml: ‘this is a text!’ });

the plugin attaches a Bubble Popup to the target DOM element, in the above example the element with “mybutton” as id attribute.

The Bubble Popup’s layout consists in a <DIV> container with a <TABLE> inside, and each <TD> has a transparent gif or png image as background

the Bubble Popup’s markup (HTML) is hardcoded in the script (similar to a jQuery UI widget) then it’s not needed to add any markup to your HTML document; it means that

  • the HTML of the document will be clean and intact therefore it’s useful to make SEO optimizations
  • You will not get bored to add any markup and it ensures less writing errors

This is the markup of the Bubble Popup created by the plugin:

<IMG> tags highlighted in yellow are optional and they match the tail’s image; just one exists among those highlighted, and the plugin chooses what image to display based on the Bubble Popup’s position.

When You set CSS properties at runtime with the “divStyle”, “tableStyle” or “innerHtmlStyle” options, that properties are added to the inline style attributes highlighted in violet for each corresponding tag.

“divStyle”, “tableStyle” or “innerHtmlStyle” options override any predefined CSS property in the stylesheet.

Remember that You can edit CSS properties at runtime, when the Bubble Popup is created/shown, otherwise as well by a CSS stylesheet.

Template System & Customization

The Bubble Popup’s markup is controlled by the CSS file “jquery-bubble-popup.css”;

Inside that file, each CSS class has a prefix as “jquerybubblepopup” and this is the base class name.

If other CSS class definitions in the document are in conflict with the Bubble Popup’s CSS class names, You will need only to choose a new valid base name, replace all occurrences of the old base class name “jquerybubblepopup” inside the “jquery-bubble-popup.css” file with the new base name and set the “baseClass” option at runtime.

CSS classes control the style of each element inside the markup and You can access to each CSS properties of them to customize the layout:

Themes

All the themes are inside the “jquerybubblepopup-theme” folder; each theme can be applied to the Bubble Popup at runtime by the “themeName” option.

Each theme has different colors and background images; You can create your own theme drawing the images and saving them inside a folder’s theme. Inside the folder “Themes”, You will find the file “bubble-popup-themes.png” and it can help you to create your customized themes.

The CSS file “jquery-bubble-popup.css” controls the styles of each theme; the plugin adds the class of the theme (for example “.jquerybubblepopup-azure”)

to the main <DIV> container in the markup, then you can edit the style of any element inside the Bubble Popup markup for each theme.

Theme Margins

The margins in the following images, control the distance of the Bubble Popup from the target DOM element;

By default, “themeMargins.total” option (highlighted in red) and “themeMargins.difference” option (in orange) are respectively “13px” and “10px”; When the Bubble Popup is loaded, the plugin deletes the margin difference in orange, decreasing the distance from the target element and allowing that the tail is above the element.

Position and Alignment

The Bubble Popup can be attached and displayed on the left, top, right or bottom side of the target DOM element.

This is determinated by the “position” option that can be obviously set to one of the following values: ‘left’, ‘top’, ‘right’ or ‘bottom’.

Furthermore, the alignment of the Bubble Popup is conditional on the “position” option:

if the Bubble Popup is on the left or right side of the target element (in other words, “position” option is ‘left’ or ‘right’) then the alignment of the Bubble Popup can be only vertical (“align” option is ‘top’, ‘middle’ or ‘bottom’)

and

if the Bubble Popup is on top or bottom side of the target element (in other words, “position” option is ‘top’ or ‘bottom’), the alignment of the Bubble Popup can be only horizontal (“align” option is ‘left’, ‘center’ or ‘right’)

Remember that if you set correctly a “position” with a wrong “align” option, the plugin corrects it and “align” will be

‘center’ if the Bubble Popup position is ‘top’ or ‘bottom’

or

‘middle’ if the Bubble Popup position is ‘left’ or ‘right’

Note: the same rules, for the alignment and validation, are applied to the tail’s image alignment.

Implementation Notes

<IMG> and <MAP> tags:

If you create a Bubble Popup for a raw <IMG> tag make sure to set also image’s width and height by a CSS stylesheet or inline style attribute, according to HTML5 specifications as <img src=”image.jpg” style=”width:186px; height:40px” /> ; otherwise, in same browser the plugin cannot get the image dimensions then the alignment will fail.

It’s impossible to attach a Bubble Popup to a <MAP> tag because it has no top or left property and it will be still invisible inside the DOM, also jQuery cannot get any coordinates for a <MAP> tag; however you can attach a bubble popup to an <IMG> tag that uses that map tag and reposition the Bubble Popup where you want, getting the Bubble Popup’s ID inside the DOM and set new top/left CSS properties.

About .CreateBubblePopup() method…

You can create obviously an empty Bubble Popup also with “.CreateBubblePopup()” without a themePath option; however I suggest you to set always a valid path for the theme, because if the path does not exists and for any impredictable reason the browser load it, you’ll get an error!

Adding customized mouse events…

If you need to add customized mouseover or mouseout events to the target element, you don’t need to disable managed events, because customized events do not affect managed events, then just add them with the jQuery syntax as “$(‘#element’).mouseover(function(){ … });” .

Known Bugs & Workarounds

Bubble Popup plugin is strongly linked to the .data() function of the jQuery Library, this implies that it is not possible to create Bubble Popups for <object>, <applet> or <embed> elements in the DOM: “Due to the way browsers interact with plugins and external code, the .data() method cannot be used on <object>, <applet> or <embed> elements” , for more information, see: http://api.jquery.com/data/

However, You can wrap an <object>, <applet> or <embed> element with a <div> and attach to it a Bubble Popup.

19 comments

  1. Alex Ursul

    April 11, 2012 at 7:39 am (UTC 2)

    Reply

    Hi!
    Thank you for this great plugin! I love it!

    But suddenly I encountered a problem. I see two breaks on the tooltip’s border, from the left and the right side, instead of solid border.

    What steps will reproduce the problem?
    1. Create tooltip for some element with 6-10 strings of text
    2. set { position: ‘bottom’ } in tooltip settings
    3. Move your mouse on the item to display the tooltip and to see some breaks in tooltip border

    Theme “Azure”. Reproducible in Chrome, Opera, Firefox.

    I can send screenshot to you if necessary.
    Regards

    1. maxvergelli

      April 11, 2012 at 11:27 am (UTC 2)

      Reply

      Hi Alex, maybe you have a conflict between the css styles, including those in your document and those in the plugin, otherwise the plugin will not load properly the image files of the themes, in this case you must specify a correct path in the option of the plugin “themePath”;

      please try the following code, changing the paths of the appropriate file *. js and *. css in the head of the html document, and with the appropriate “themePath” option.

      I have tested it with Chrome and Firefox however I have not found any breaks with your settings above:

      <!DOCTYPE HTML>
<html>
<head>
<title>jQuery Bubble Popup</title>
<meta name="description" content="Create Bubble Popups for different DOM elements with a single line of code in jQuery">
<meta name="keywords" content="jquery, bubble, popup, jquery bubble popup">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="../css/jquery-bubble-popup-v3.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../scripts/jquery-bubble-popup-v3.min.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
$(document).ready(function(){

		//create a bubble popup for each DOM element with class attribute as "text", "button" or "link" and LI, P, IMG elements.
		$('.button').CreateBubblePopup({

									position : 'bottom',
									align	 : 'center',

									innerHtml: 'Take a look to the HTML source of this page <br /> \
												to learn how the plugin works!<br /> \
												Take a look to the HTML source of this page <br /> \
												to learn how the plugin works!<br /> \
												Take a look to the HTML source of this page <br /> \
												to learn how the plugin works!<br /> \
												Take a look to the HTML source of this page <br /> \
												to learn how the plugin works!<br /> \
												Take a look to the HTML source of this page <br /> \
												to learn how the plugin works!<br /> \
												Take a look to the HTML source of this page <br /> \
												to learn how the plugin works!',

									innerHtmlStyle: {
														color:'#FFFFFF',
														'text-align':'center'
													},

									themeName: 	'all-black',
									themePath: 	'../images/jquerybubblepopup-themes'

								});
});
//-->
</script>
<style type="text/css">
<!--

/* Doc Styles */

html, body, div, table, td, a, p, img{
	margin:0px;
	padding:0px;
	width:auto;
	height:auto;
	font-family:'Trebuchet MS', Arial;
	font-size:11px;
	text-align:center;
	vertical-align:middle;
	color:#333333;
}
h1{
	font-size:24px;
}
h2{
	font-size:16px;
}
table{
	margin:auto;
	display:table;
	border-collapse:collapse;
	border-spacing:0px;
	empty-cells:show;
}
a{
	color:#006699;
}
a:hover{
	color:#0099FF;
}
div.page{
	margin:0px auto;
}
div.header{
	margin:25px auto;
}
div.content{
	margin:auto auto;
	text-align:center;
}
div.footer{
	margin-top:50px;
}
div.footer a{
	font-size:10px;
}
.button{
	display:table-cell;
	vertical-align:middle;
	width:200px;
	height:60px;
	color:#FFFFFF;
	background-color:#006699;
	border:#003366 1px solid;
	cursor:pointer;
}
-->
</style>
</head>
<body>
<div class="page">
	<div class="header">
	  <h1>jQuery Bubble Popup</h1>
	  <h2>You can create Bubble Popups for different DOM elements with a single line of code in jQuery</h2>
	</div>
	<div class="content">
		<br />
		<br />
		<br />
		<table style="border-collapse:separate;border-spacing:30px;">
			<tbody>
				<tr>
					<td><div class="button">This is a &lt;DIV&gt; tag</div></td>
			    </tr>
				<tr>
					<td><br /><br /><br /><strong>Take a look to the HTML source of this page to learn how the plugin works!</strong></td>
				</tr>
			</tbody>
		</table>
	</div>

	<div class="footer">
	  <p><a href="http://www.maxvergelli.com/jquery-bubble-popup/&quot; rel="nofollow">JQUERY BUBBLE POPUP</a> &copy; 2012 MAX VERGELLI</p>
	</div>
</div>
</body>
</html>

      I hope it can help, :)
      Max

  2. maxvergelli

    April 11, 2012 at 9:10 pm (UTC 2)

    Reply

    Hi Alex, if you have not solved the problem, I suggest you to check if in your main css document the position property of the body tag is set to “relative”, in this case try to replace it with a “static” value

    body {
/*
	position: relative;
*/
	position: static;
}

    besides, try to replace all the content of the “jquery-bubble-popup-v3.css” file with this one more strict…

    /*

	jQuery Bubble Popup v.3.0
	http://www.maxvergelli.com/jquery-bubble-popup/

	Copyright (c) 2012 Max Vergelli

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:

	The above copyright notice and this permission notice shall be included in
	all copies or substantial portions of the Software.

	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	THE SOFTWARE.

*/

	/* Layout Settings */
	.jquerybubblepopup{width:auto;height:auto;margin:0px;padding:0px;position:absolute;border:0px !important;z-index:100;text-align:center;background-color:transparent;}
	.jquerybubblepopup-ie{filter:progid:DXImageTransform.Microsoft.Shadow(color="#666666", Direction=135, Strength=3);} /* the plugin adds this class only if browser is IE; if IE9, it's added to main <DIV> else to <TABLE> */
	.jquerybubblepopup table{width:auto;height:auto;margin:0px;padding:0px;display:table !important;border-collapse:collapse !important;border-spacing:0px !important;border:0px !important;empty-cells:show !important;background-color:transparent;}
	.jquerybubblepopup tbody{display:table-row-group !important;vertical-align:middle !important;border:0px !important;background-color:transparent;}
	.jquerybubblepopup tr, .jquerybubblepopup td{margin:0px;padding:0px;background-color:transparent;border:0px !important;}
	.jquerybubblepopup-top-left,    .jquerybubblepopup-top-right,
	.jquerybubblepopup-bottom-left, .jquerybubblepopup-bottom-right{width:21px;height:21px;overflow:hidden;background-repeat:no-repeat;}
	.jquerybubblepopup-top-middle,  .jquerybubblepopup-bottom-middle{overflow:hidden;background-repeat:repeat-x;}
	.jquerybubblepopup-middle-left, .jquerybubblepopup-middle-right{overflow:hidden;background-repeat:repeat-y;}
	.jquerybubblepopup-tail{border:0px !important;margin:0px;padding:0px;display:inline;}

/*
	Themes:

	The plugin adds the class of the theme (for example ".jquerybubblepopup-azure")
	to the main <DIV> container, then you can edit the style of any element inside the
	Bubble Popup markup for each theme.

	The following code defines fonts and backgrounds of the "innerHtml" for each theme:
*/
	.jquerybubblepopup-azure  .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-black  .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-blue   .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-green  .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-grey   .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-orange .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-violet .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-yellow .jquerybubblepopup-innerHtml
	{
		font-family:'Trebuchet MS',Arial;
		font-size:11px;
		font-weight:normal;
		color:#000000;
		background-color:#FFFFFF;
	}
	.jquerybubblepopup-all-azure  .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-all-black  .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-all-blue   .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-all-green  .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-all-grey   .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-all-orange .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-all-violet .jquerybubblepopup-innerHtml,
	.jquerybubblepopup-all-yellow .jquerybubblepopup-innerHtml
	{
		font-family:'Trebuchet MS',Arial;
		font-size:11px;
		font-weight:normal;
		color:#FFFFFF;
	}
	.jquerybubblepopup-all-azure  .jquerybubblepopup-innerHtml{background-color:#0099FF;}
	.jquerybubblepopup-all-black  .jquerybubblepopup-innerHtml{background-color:#000000;}
	.jquerybubblepopup-all-blue   .jquerybubblepopup-innerHtml{background-color:#0066CC;}
	.jquerybubblepopup-all-green  .jquerybubblepopup-innerHtml{background-color:#66FF00;}
	.jquerybubblepopup-all-grey   .jquerybubblepopup-innerHtml{background-color:#666666;}
	.jquerybubblepopup-all-orange .jquerybubblepopup-innerHtml{background-color:#FF9933;}
	.jquerybubblepopup-all-violet .jquerybubblepopup-innerHtml{background-color:#FF33FF;}
	.jquerybubblepopup-all-yellow .jquerybubblepopup-innerHtml{background-color:#FFCC00;}
  3. Ross

    April 13, 2012 at 8:46 am (UTC 2)

    Reply

    Thanks a bunch for this tooltip.

    I can’t seem to figure out how to keep one of my tooltips shown when others on the same page are called afterwards. The other 3 tooltips I want to hide after mouse out but I would like to keep one tooltip shown and visible at all times. I am using the mouseOut: ‘show’ event parameter on the tooltip I want to stay shown. I am showing it on DOM ready, and want to keep it shown even after all other tips are called.

    Is it possible to show more than one tooltip at once this way?

    Here is my current code.

    options1 = {
    alwaysVisible: false,
    mouseOut: ‘show’,
    position: “right”,
    innerHtml: title,
    themeName: “black”,
    innerHtmlStyle: {
    “text-align”:”center”,
    “max-width”:”250px”,
    “font-size”:”.9em”,
    “font-weight”:”bold”,
    “padding”:”2px”,
    },
    //manageMouseEvents: false,
    divStyle: {
    “margin-top”:”-5px”,
    “margin-left”:”10px”,
    },
    //distance: 200,
    “openingSpeed”:1,
    “closingSpeed”:1,
    };
    $(“#fp-font-header”).CreateBubblePopup( options1 );
    //$(“#fp-font-header”).SetBubblePopupOptions( options );
    $(‘#fp-font-header’).ShowBubblePopup( options1 );

  4. Mark

    April 19, 2012 at 6:35 pm (UTC 2)

    Reply

    Max – Thank you for working on this project!

    I have a website that dynamically displays a set of check boxes with a brief description of the checkbox next to it for example:

    A
    B
    C

    The values and the descriptions are all generated dynamically. I want to add a pop up bubble to the descriptions to provide the user a definition of what A or B or C really means and that data comes from a table in the MYSQL database. I know how to get the data to the screen using PHP through a database call and then display it to the screen. I don’t know how to get the data and send it to Jquery so I can add it to my bubble pop function. Somehow I need to return an array with my definition and right an each() loop through this function.
    My alternative would be to have Jquery call my MYSQL DB for the values, but that seems like a waste. I know this is more of a jQuery question, but you might get this question again : )

    $(document).ready(function(){
    $(‘.button’).CreateBubblePopup({
    position : ‘top’,
    align : ‘center’,

    innerHtml: ‘Take a look to the HTML source of this page’, //Need to replace this string with my Array values from MYSQL table!!!!!!!
    innerHtmlStyle: {
    color:’black’,
    ‘text-align’:'center’
    },
    themeName: ‘grey’,
    themePath: ‘jquerybubblepopup-themes’
    });
    });

    Thanks for any help in advance!

    1. Mark

      April 20, 2012 at 12:08 am (UTC 2)

      Reply

      Nevermind I solved my own question. This function creates 3 different bubbles in 3 different ways. If I new any jquery I would have figured this out quicker! Here’s how to do it:

      $(document).ready(function(){
      $(‘.stuff’).each(function(){
      $(this).CreateBubblePopup({
      position : ‘top’,
      align : ‘center’,

      innerHtml: $(this).attr(“title”),
      innerHtmlStyle: {
      color:’black’,
      ‘text-align’:'center’
      },
      themeName: ‘grey’,
      themePath: ‘jquerybubblepopup-themes’
      });
      });
      });

      mouse over here!
      mouse over here!
      mouse over here!

  5. Mark McMillin

    April 20, 2012 at 9:44 pm (UTC 2)

    Reply

    Max,
    I think I found a real issue. I have a that I am tying a bubble to. Sometimes the information is too large. It appears the bubble popup tries to go to the left or right as a default instead of going above the div in those cases.
    That is fine and actually kind of cool, although I would like to force it above, the really interesting thing is that the bubble goes 2 divs above my original div, instead of pointing to the DIV i really need it to point at. It is very consistent in this behavior. You can see the behavior here:

    http://v2.codecomply.com/master.php

    You have to click one of the building code reports until the checkboxes with the divs appear.

    1. Is there a way to force the bubble to the top even though the data is large?

    Cheers! Thanks!

    -Mark

    1. Mark McMillin

      April 20, 2012 at 9:55 pm (UTC 2)

      Reply

      function occupancy_description_bubbles(){
      $(‘.main_occupancy_descriptions’).each(function(){
      $(this).CreateBubblePopup({
      position : ‘top’,
      align : ‘center’,
      innerHtml: $(this).attr(“title”),
      innerHtmlStyle: { color:’black’,'text-align’:'center’ },
      themeName: ‘blue’,
      themePath: ‘jquerybubblepopup-themes’
      });
      });
      };

  6. Pierrot

    April 23, 2012 at 9:14 pm (UTC 2)

    Reply

    Hello, great great library.
    But I am looking to know how can I display the title of the selected link. I am trying hard to find the solution
    my code is the following
    $(‘a.bubble’).CreateBubblePopup({
    width: 100,
    themePath: ‘modules/hwbubble/js/jquery-bubble-v3/jquerybubblepopup-themes’,
    themeName : ‘all-grey’,
    innerHtml: ‘//Display here the title of the mouseover link which has .bubble class’
    })

    and one of my link
    Show the title of the link

    Your help will be very helpfuly

  7. negrelja

    April 25, 2012 at 9:19 pm (UTC 2)

    Reply

    I am trying to implement the jQuery popup on a wordpress based site and only one of the images from the grey theme is showing up (“tail-bottom.png”).

    Here is my jQuery function that is implemented on the root level of my wordpress theme folder.

    $(‘#go44′).CreateBubblePopup({
    position : ‘top’,
    align : ‘center’,
    innerHtml: ‘blah blah \
    blah blah blah \
    blah blah blah \
    blah’,
    innerHtmlStyle: {
    ‘text-align’:'left’
    },
    themeName: ‘grey’,
    themePath: ‘/images/jquerybubblepopup-theme’
    });

    Relative paths did not seem to be working at all so I used the above PHP tag to reference a direct path to the “grey” theme images. Are there any known conflicts with PHP?

    1. maxvergelli

      April 26, 2012 at 11:12 am (UTC 2)

      Reply

      PHP??? i dont see any PHP tag. However, verify the folder name, it’s not “jquerybubblepopup-theme” but “jquerybubblepopup-themes” !!!

      1. negrelja

        April 26, 2012 at 3:25 pm (UTC 2)

        Reply

        Your blog probably doesn’t allow the PHP tag, It should showup just before “images/jquerybubblepopup-theme” below:

        $(‘#go15′).CreateBubblePopup({
        position : ‘top’,
        align : ‘center’,
        innerHtml: ’180 SE Neptune Dr \
        Warrenton, OR 97146 \
        503-861-6060′,
        innerHtmlStyle: {
        ‘text-align’:'left’
        },
        themeName: ‘grey’,
        themePath: ‘/images/jquerybubblepopup-theme’
        });

        I was previously using version 2 of your script and in this version the folder was named “jquerybubblepopup-theme”. After updating my code to the latest v3 script I was still having the same issues. After some debugging and looking at the source output I found that the “background-image:url(ThemePath);” does not include single quotes around the the path reference. In my case this was preventing the theme images from loading properly. To fix the issue I actually had to un-minify your code (jquery-bubble-popup-v3.min.js), add the single quotes around the background-image path reference, re-minified, and now it works perfectly.

        On a side note, the code worked perfectly on some static pages that I’ve built in the past. The issue only started when trying to integrate the code into my wordpress theme.

  8. TheDunhamGroup

    April 26, 2012 at 4:39 pm (UTC 2)

    Reply

    Max –

    Thank you for your excellent documentation and hard work on this project.

    I would like to ask you a question about the image map use of the bubble:

    A.) I would like the bubble to appear over image section X when people mouse of X on that image.

    B.) There are also text links position in a horizontal ul ABOVE the image (not a a part of the image).

    C.) When someone mouses over the link that says “Hey, check out element X below!” I want that to initiate the bubble over section X in the image.

    Total: Image map bubble activates when hovered over. Can I set a nearby link to initiate that same bubble?

    Hoping this is way easy and I’m being overly complicated for nothing,

    The Dunham Group

  9. David

    April 28, 2012 at 1:32 am (UTC 2)

    Reply

    I love the tool! It is pretty much exactly what I am looking for…. with one little problem. We have to review our apache error logs regularly and minimize issues. After reviewing the logs after implementing this on a onmouseover event I found:

    popup = function(tag,html){
    $(tag).CreateBubblePopup({
    alwaysVisible: true,
    position : ‘left’,
    align : ‘center’,
    innerHtml: html,
    innerHtmlStyle: {
    color:’#000000′,
    ‘text-align’:'left’
    },
    themeName: ‘all-blue’,
    themePath: ‘jquerybubblepopup-themes’
    });
    }

    When the mouse over event occurs, I get the following in my apache error log. It looks like, while doing a replace of the positioned tag, it finds extras items in the array that perform the functions:
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/top-function (p_val) {for(var i = 0, l = this.length; i < l; i++) {if(this[i] == p_val) {return true;}}return false;}.png
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/top-function (p_val) {this.splice(p_val,1);}.png, referer: http://intranet.futuraind.com/mis/david/gant.php
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/middle-function (p_val) {for(var i = 0, l = this.length; i < l; i++) {if(this[i] == p_val) {return true;}}return false;}.png
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/middle-function (p_val) {this.splice(p_val,1);}.png
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/bottom-function (p_val) {for(var i = 0, l = this.length; i < l; i++) {if(this[i] == p_val) {return true;}}return false;}.png
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/bottom-function (p_val) {this.splice(p_val,1);}.png, referer: http://intranet.futuraind.com/mis/david/gant.php
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/function (p_val) {for(var i = 0, l = this.length; i < l; i++) {if(this[i] == p_val) {return true;}}return false;}-left.png
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/function (p_val) {for(var i = 0, l = this.length; i < l; i++) {if(this[i] == p_val) {return true;}}return false;}-middle.png
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/function (p_val) {for(var i = 0, l = this.length; i < l; i++) {if(this[i] == p_val) {return true;}}return false;}-right.png, referer: http://int
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/function (p_val) {for(var i = 0, l = this.length; i < l; i++) {if(this[i] == p_val) {return true;}}return false;}-function (p_val) {for(var i =
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/function (p_val) {for(var i = 0, l = this.length; i < l; i++) {if(this[i] == p_val) {return true;}}return false;}-function (p_val) {this.splice(
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/function (p_val) {this.splice(p_val,1);}-left.png
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/function (p_val) {this.splice(p_val,1);}-middle.png
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/function (p_val) {this.splice(p_val,1);}-right.png
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/function (p_val) {this.splice(p_val,1);}-function (p_val) {for(var i = 0, l = this.length; i < l; i++) {if(this[i] == p_val) {return true;}}retu
    [Fri Apr 27 16:39:06 2012] [error] [client 10.0.0.138] File does not exist: /var/www/intranet/site/mis/david/jquerybubblepopup-themes/all-blue/function (p_val) {this.splice(p_val,1);}-function (p_val) {this.splice(p_val,1);}.png

    I was able to mitigate the problem by adding a "don't do this if function is found in the string", but I imagine you might have a better solution….

    if (y.indexOf("function") < 0) {
    D.push(y);
    }

    I hope this is helpful. And thanks for sharing a pretty sweet tool!

    1. maxvergelli

      May 2, 2012 at 5:26 pm (UTC 2)

      Reply

      thanks David, I ll fix this bug with the next release.

  10. Willy

    May 2, 2012 at 3:58 pm (UTC 2)

    Reply

    Max,
    This is very nice article and popups. I tested using different browsers (IE 7 and Firefox 11.0) and the popups behave differently for each browser when the window is resized. You could see the screenshot from the link below
    https://picasaweb.google.com/104330709850749859397/Screenshots?authuser=0&authkey=Gv1sRgCO2KjoOxqpTIAg&feat=directlink
    Would it be possible to maintain the popups location despite the window size/screen resolution? It seems IE keep redraw the bubble as you resize the window. I used alwaysVisible: false but it’s more likely the css?

    You could test it on the example that you provided.
    Bubble Popup mantains position on window resize
    http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/window-resize.html

    Thanks Max!

    Willy

  11. Viktor

    May 3, 2012 at 1:33 pm (UTC 2)

    Reply

    Hi!

    This plugin is awesome. However I think I found a bug.

    In your demo file attached to the download zip (test-jquery-bubble-popup.html)

    Try adding a these styles to the body element.
    font-size: 20px;
    line-height: 1.5em;

    This will cause the tail image increase the height of the td element. Depending on the values this will make a hole in the bubble.

    Maybe you should override these values for the bordering table cells in the default css?

    Thanks for an excellent plugin!

    /Viktor

  12. alex

    May 5, 2012 at 6:10 am (UTC 2)

    Reply

    i can make popup have image?

  13. Jared

    May 16, 2012 at 9:53 pm (UTC 2)

    Reply

    Hey, I love the look and feel of the bubble popup, your stock designs are great and description of how to modify and manage the bubble popup is clean and concise.

    I am here for another reason however…It seems that after multiple occasions of my mouse entering the element (and therefore initiating the bubble popup on said element) the elements responsiveness (and as such ability to use) is slowed down considerably. It seems to increase substantially with each time I enter and exit the specific element and I cannot see anything in my code that would cause such an issue. Done enough times the rendering time for the element makes it unusable.

    I am passing the desired text that will show in the popup and the id of the element I want the bubble popup to show up on in a function as such:

    As you can see I am using ‘asp:Button’ in this scenario however, I am using multiple types of elements (not the reason for the issue I don’t think), all of which react similarly.

    In my .js file I am initiating the bubble popup as such:

    function popup(text, id) {
    $(‘#’ + id).mouseover(function () {

    $(‘#’ + id).CreateBubblePopup({
    position: ‘right’,
    align: ‘left’,
    innerHtml: text,
    innerHtmlStyle: { color: ‘#FFFFFF’, ‘text-align’: ‘center’ },
    themeName: ‘all-black’,
    themePath: ‘images/jquerybubblepopup-themes’
    });
    });

    $(‘#’ + id).mouseleave(function () {
    $(‘#’ + id).RemoveBubblePopup();
    });

    }

    Seems relatively straightforward to me, on mouseover the popup initiates, on mouseleave it removes the popup from dom, etc. ( I did this because on mouseleave from a radiobutton I was finding that sometimes an instance of the bubble popup would stay indefinitely until I refreshed the page).

    Please let me know your thoughts, fixes, if this is my problem, etc.

    Thanks!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>