jQuery Bubble Popup v.3.0 Documentation

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
Download
Installation
Examples
Browser Compatibility
Functions
Options
How Bubble Popup works
Template System & Customization
Position and Alignment
Implementation Notes
Known Bugs & Workarounds

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…

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.

91 comments

Alex Ursul

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

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

maxvergelli

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

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

maxvergelli

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

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;}

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 );
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!
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’
  });
  });
  };
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
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.
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
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.
  1. lpdesign
    
    December 3, 2012 at 6:36 pm (UTC 2)
    
    Reply
    
    has this bug been fixed yet? I am also getting the same error messages (using v.3). thanks!
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
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
alex

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

Reply

i can make popup have image?
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!
1. pratik roy
  
  June 30, 2012 at 12:21 pm (UTC 2)
  
  Reply
  
  use mouseout instead of mouseleave, because ‘ mouseout fires when the pointer moves out of child element as well, while mouseleave fires only when the pointer moves out of the bound element.’
Mark B.

May 21, 2012 at 10:10 am (UTC 2)

Reply

Hi,

is it possible to have the tooltip stay open – I’d like to use it in a form, for fields not filled out correctly by the user – but I can’t figure out how to make the bubblepopup stay visible, even though the user doesn’t hover the textinput…

Thanks for a cool script
Mike

May 27, 2012 at 1:38 pm (UTC 2)

Reply

Great plugin! Thank you very much for the great script and excellent documentation.

I have a quick question that doesn’t seem to have been asked yet.

Is there any way to have the popup move with an element in real-time? Say for example, you have an “always visible” element that moves dynamically around the screen. Is there a way to anchor the popup so that it moves consistently with its parent element?

Thanks!
shawn

May 28, 2012 at 6:40 am (UTC 2)

Reply

I want to create a bubble onclick of event. This bubble should close on clickout of thae element or bubble.

.Onclick i createa bubble and freeze it. now i am trying to close this by removeBubblePopUp() method,but When i try to do so i do not find taht bubble. HasBubblePopup function returns null. removeBubblePopUp() returns 0. I could see that bubble markup in Dom.Please help.
alfiokk

May 31, 2012 at 11:10 am (UTC 2)

Reply

This runs:

$(‘#go44′).each(function(){
$(this).CreateBubblePopup({
position : ‘top’,
align : ‘center’,
innerHtml: $(this).attr(‘title’),
innerHtmlStyle: {
color:’#FFFFFF’,
‘text-align’:'center’
},
themeName: ‘all-black’,
themePath: ‘jquerybubblepopup-themes’
});
});

Greetings from Spain.
Steffen

June 6, 2012 at 11:27 am (UTC 2)

Reply

Hi Max,

first of all thx for the great plugin.

I’m using this with magento and need a solution to inject different content into the inner HTML container.
Is json a solution or do you have a better solution?

Thx and bye
Steffen
skrosoft

June 7, 2012 at 1:01 am (UTC 2)

Reply

Setup a bubble on an element with a display:none parent, and your bubble will appear with offset 0,0

Just need a .is(‘:visible’) before displaying the “popup”.
Andrew

June 9, 2012 at 10:00 pm (UTC 2)

Reply

Found a glitch with bubblepop that was in version v.2.3.1 as well as the current version

Working Normally
http://img.photobucket.com/albums/v139/Icefire/jQuery/working.png

When a normally working bubblepop or trigger is to close to the top of the browser window it breaks like so
http://img.photobucket.com/albums/v139/Icefire/jQuery/toclosetotop.png

The plugin documentation is excellent and its the major draw for me using this pluggin. This is the only issue I have with the plugin I think this would be the #1 plugin for jquery I would tell people about if not for this error/glitch as the plugin itself is so useful.

If its somehow my mistake can you point me in the right direction for a solution?
In a perfect world if it was going to fail over to bottom I wish it would keep the tail attribute and/or not have that gap.
1. maxvergelli
  
  June 11, 2012 at 6:51 pm (UTC 2)
  
  Reply
  
  the old doctype or bad CSS, can affect the correct display of the popups, please post your HTML sourcecode.
  1. DarkLord
    
    August 3, 2012 at 4:04 pm (UTC 2)
    
    Reply
    
    Hi there.
    
    This is my solution:
    
    In jquery-bubble-popup-v3.css need make one change:
    
    For class “.jquerybubblepopup” add style: “font-size:1px;”
    
    Result looks like:
    “.jquerybubblepopup{width:auto;height:auto;margin:0px;padding:0px;position:absolute;border:0px;z-index:100;text-align:center;background-color:transparent;font-size:1px;}”
    
    Best regards, DarkLord.
2. Che
  
  August 28, 2012 at 4:28 pm (UTC 2)
  
  Reply
  
  In my case, adding this to the CSS file fixes the gap:
  
  .jquerybubblepopup td img { display: block; }
  
  Cheers
  1. Zax Lofful
    
    September 6, 2012 at 1:00 am (UTC 2)
    
    Reply
    
    Hello,
    
    I use this plugin on my site as well. I had the problem with a gap showing up at first and it took me a very long time to realize the issue. It is related to the fact that jQuery Bubble popup is table-cell display style and I had other stuff that was block style.
    
    The fix posted above (Che) fixed the issue for me. I didn’t try the other fix (font-size) as I had already tried this.
    
    If it is not required I would recommend going a block display and these issues will go away for all.
    
    Thanks,
    Zax
Sweet Lew

June 11, 2012 at 6:20 pm (UTC 2)

Reply

Could you make it so the next version adds the option to show the bubble popup on a jquery click instead of just onmouseover? Thanks!
1. maxvergelli
  
  June 11, 2012 at 6:45 pm (UTC 2)
  
  Reply
  
  take a look at the examples how to show a bubble popup on click event!
  1. Sweet Lew
    
    June 11, 2012 at 7:02 pm (UTC 2)
    
    Reply
    
    Ok thanks! I was looking at 3am last night and must have been too tired to see straight.
Shadab Mustafa (@shadabmustafa)

June 14, 2012 at 12:53 pm (UTC 2)

Reply

Hi Max,

I want to appreciate your work and its working really great with my requirements. Recently I noticed an issue in it… I’ve placed number of DIV elements on an image and have associated BubblePopup with each DIV element. The popup displays great as expected. But when I move around my mouse over the popup, and if there’s another DIV behind the popup, this DIV’s mouseover event is fired closing my already opened popup. I’ve set selectable = true in Popup constructor.

You can have a look at this here: http://209.112.18.241/NSEWebKarachi/OLSL/SitemapLite.aspx?Param=lyuSqC2sNQWRzjU8XWLstc6YJtwcUNdl4lIhpgpwkFIHTcgU%2fResQo8yu09v2lJyw46hM2pLa%2fUayedkaAD5uQ%3d%3d

Your early response will be greatly cherished.

Thanks,
Dmitri

June 19, 2012 at 2:00 pm (UTC 2)

Reply

Hi Max,
Your plugin is awesome and saves a lot of time. Thanks for that!
However, I found a very annoying bug.
Let’s say there are 2 elements on the page: id=”id1″ and id=”id2″.
Then the following code does not work as expected.
('#id1').CreateBubblePopup({ themeName: 'all-grey', innerHtml: 'test 1', position: 'right', align: 'middle', tail: {align: 'middle', hidden: false}, selectable: true }).ShowBubblePopup(); ('#id2').CreateBubblePopup({ themeName: 'all-grey', innerHtml: 'test 2', position: 'right', align: 'middle', tail: {align: 'middle', hidden: false}, selectable: true }).ShowBubblePopup();
The expected behavior is that 2 bubbles are shown together at the same time, but since you create div elements based on the timestamp (if I’m not mistaken), the ids of div elements happen to be the same and only one div element is created => one popup is shown.
A workaround to this is calling CreateBubblePopup after some timeouts, but this is not very handy. Could you please make a fix and introduce some randomness in ids so that multiple bubbles could be created at the same time?
Thanks!
veeramanink

June 20, 2012 at 11:48 am (UTC 2)

Reply

it works great on chrome & firefox, but in IE9 i can only see shadow box can’t see the text as well
skrosoft

June 20, 2012 at 10:21 pm (UTC 2)

Reply

Max have you seen my previous message ? If i setup a bubble on a display none element, and if i put the mouse on the left-top corner of my window, the bubble will appear. What should i do ?
Cormac Lehane

June 25, 2012 at 4:25 pm (UTC 2)

Reply

Hi, I was wondering, are the popups intentionally transparent? Because with my website, its showing the necessary popup text and also the webpage text on top of each other. I changed the background color and it had no effect.

Thanks,
Cormac.
Cormac Lehane

June 26, 2012 at 4:37 pm (UTC 2)

Reply

Hey, what if the popup is showing but with transparent-lines or spaces cutting it into pieces. It is the lines along the sides of the different template classes where it is showing.
Ariel Rakos

June 26, 2012 at 6:04 pm (UTC 2)

Reply

how to put the content inside de div in the popup ?

like this : this text in the popup

Thanks you
Flavio

June 28, 2012 at 10:37 am (UTC 2)

Reply

Hi Max,
first of all, thanks for your plugin, it’s very useful!

Now I have a problem, I would like to have in one popup html this situation:

1)a static div (like a title), always visible
2) a dynamic table (or div) SCROLLABLE
3) another static div, always visible

As you know, if I set the innerHTMLStyle with the option “overflow:scroll”, the whole popup will scroll, that is not what I want. If I set the CSS style for the table inside the innerHTML, it doesn’t work: so, what can I do?

As example, I tried to put this inner HTML in a popup:
TITLE
…..
FOOTER

Thanks in advance for helping me!
Flavio
Marc

July 10, 2012 at 9:32 am (UTC 2)

Reply

Have a problem with smaller button, if you pass your cursor over your button in top of the window here, you have the half of the button that is not in function caus the tail overlap the half of the button, there is a way to put the tail outside or an overlap on 2px instead of the half of the button height??
1. Javi
  
  October 27, 2012 at 4:36 pm (UTC 2)
  
  Reply
  
  Hello Marc. Did you achieve to solve that issue?
Tom

July 10, 2012 at 9:49 am (UTC 2)

Reply

Hi,

First of all: great plugin.
Discovered one problem though. I’m trying to show an image in the popup based on an unc-path. This doesn’t work except in IE.

In Firebug the image doesn’t show in the bubble, when hovering over the image in the bubble’s innerhtml in firebug, the image loads correctly.

Any ideas?
Marc

July 12, 2012 at 3:28 am (UTC 2)

Reply

Have an issue with a site, don’t know what your script take to calculate the size of the tail section but in one web site, I have width 23.2167px instead of 21px for a right side bubble!? Even if i take off my css form!?

Do you have an idea??

Marc
Marc

July 14, 2012 at 4:20 am (UTC 2)

Reply

Better add this in your css to resolve a problem that I had with a little space in the top!

.jquerybubblepopup-top-middle{background-position:bottom;}
.jquerybubblepopup-top-left, .jquerybubblepopup-top-right{background-position:bottom;}
Rena

July 17, 2012 at 8:37 pm (UTC 2)

Reply

Hey, this works great in my Android webapp!
cagrizorkol

July 18, 2012 at 9:44 am (UTC 2)

Reply

when hover item and appear bubble, i dont want that bubble slide… no effect.. how can i do that?
1. Marc
  
  July 18, 2012 at 7:24 pm (UTC 2)
  
  Reply
  
  $(‘.YourClass’).CreateBubblePopup({
  position : ‘bottom’,
  align : ‘left’,
  tail : {
  align : ‘left’,
  hidden : ‘false’
  },
  themeMargins : {
  total: ’4px’,
  difference: ’1px’
  },
  selectable : false,
  distance : ’0px’, <===== put zero here!!
Rox

July 20, 2012 at 6:37 pm (UTC 2)

Reply

I know very little about javascript, does anyone know a way to make the below code more efficient. Thank you!

HTML exert code for pop-up

Order Position
mahendran

July 22, 2012 at 9:49 am (UTC 2)

Reply

I’m using this function to call and display the bubble popup.
But unable to display multiple at a time.

function disp_tooltip(obj,title,thm)
{
$(document).ready(function(){
$(obj).CreateBubblePopup({
position : ‘top’,
align : ‘right’,
innerHtml: title,
innerHtmlStyle: {color:’#FFFFFF’,'text-align’:'center’,'font-weight’:'bold’},
themeName: thm,
themePath: ‘js/jquery-bubble-popup-v3/jquerybubblepopup-themes’
} );
$(obj).ShowBubblePopup();
$(obj).FreezeBubblePopup();
});
}
Dave

July 22, 2012 at 11:10 am (UTC 2)

Reply

Still don’t get it how to create a title=’ ‘ bubble.
Got some php titles like: title=’[lang_id]‘ and got some normal html titles on the same pages: title=’This is my text’
I got a workaround to create individual functions:
$(document).ready(function(){ $('.button01').CreateBubblePopup({ innerHtml: 'Dutch', ...
$(document).ready(function(){ $('.button02').CreateBubblePopup({ innerHtml: 'English', ...
$(document).ready(function(){ $('.button03').CreateBubblePopup({ innerHtml: 'German', ...

etc

But i just wanna have a simple default title=”" in the bubble.
Anyone a simple solution?
Mohammed

July 22, 2012 at 12:45 pm (UTC 2)

Reply

Hi,
Thank you very much for this amazing plugin

I have only one question :
How can I apply the pop up to dynamically created HTML element ?
Jan

July 25, 2012 at 6:47 pm (UTC 2)

Reply

Hi,

I like your solution very much.

One problem: when selectable is true, and the popup covers another hotspot, this hotspot triggers when you just want to manipulate the text in the popup.
Could you disable the ShowBubblePopup() action when mouseover a popup in this situation.

I’ve tried to solve this one myself, but don’t succeed because I can’t get to bind event to the jquerybubblepopup table.
pratik roy

August 1, 2012 at 3:28 pm (UTC 2)

Reply

Hi,

I want a very different requirement on this wonderful plugin, my requirement is the content html of bubble popup should be dynamic,I know it can be achieved by simply attached show and hide bubble popup functions on mouseover and mouseout event but I dont want to write so many codes in each and every time I want to create the bubble popup.So,I made some changes in the plugins and made that happen,now the dynamic text is comming,but I want that features in the all bubble popups element(present onload of DOM structure or comming later via AJAX).but currently it is not coming for the bubble popups attached with AJAX content.

I think this is an important features which can make developers life a bit easier,So guys please help!
Bean Toan

August 2, 2012 at 5:39 pm (UTC 2)

Reply

Hi,

Your plugin is so great. I love it so much. Thanks for your working.

I’ve got a problem with the plugin. When i change the size of an element or image, my bubble popup can’t detect that to reposition. Is there any way to fix this problem? I’m so happy if you can answer my question.

Thank you very much.
1. JIm
  
  August 7, 2012 at 11:40 pm (UTC 2)
  
  Reply
  
  There is a “positionbubblepopup” event that you might be able to trigger to get it to reposition??
  $(‘yourselector’).trigger(“positionbubblepopup”);
JIm

August 7, 2012 at 11:36 pm (UTC 2)

Reply

First of all, great plugin! Now some suggestions:
1. innerHtml: It would be great if you could specify a JQuery object or selector referencing the innerHtml content to be displayed and have the content “lifted” from the page into the popup; similar to the way the Dialog control works. This way I can have a hidden div on my page with the popup markup, bind events to it, and have it all “Lifted” into the popup.

2. positionOffset: It would be great to have this property which could be set dynamically through javascript. In my case, I have the bubble popup showing with the arrow right next to a selected option in a select tag (showing multiple options in a list). When the option is selected it would be nice to be able to modify this offset and have the popup positioned right next to it. For now, I’m just calculating the position of the option and repositioning the popup’s containing Div manually.

3. animation: Let me turn it off!! At least I can set the distance to 0 so it doesn’t move around on me…

4. resizable: Set to true so it could be resizable like the Dialog box is…..it would just be cool.
JP

August 13, 2012 at 8:12 pm (UTC 2)

Reply

$(‘.poga4′).CreateBubblePopup({

Uncaught TypeError: Object# has no method ‘CreateBubblePopup’

This one shows error, maybe you guys know the solution

P.S demo which I downloaded works but when I want to use this excelent tooltip for image with link it doesnt work
Supriya

August 16, 2012 at 5:07 pm (UTC 2)

Reply

For anyone looking for an example of AJAX enabling this plugin where the text of the dialog is loaded from a url .Here is an example

$(document).ready(function () {
$.ajax({
url: “sometext.html”, //this is a simple html page with some text but you can always load any other dynamic content
dataType: ‘html’,
type: “GET”,
success: function (data) {
$(“.button”).CreateBubblePopup({ innerHtml: data });
}
});
});
mustapha

August 17, 2012 at 10:46 am (UTC 2)

Reply

great plugin.
pls i want to put a form in the pop-up and then add a jquery event on it in the bubble that comes up but it looks like when the bubble pops up, it does not respond to anything.
i tried to even use an external link for a css to style the popup but it did not work.
can anyone help me.
thnx in advance…
Scott Brown

August 19, 2012 at 2:08 am (UTC 2)

Reply

Having problems with the plugin with Windows8RTM, and the new IE10 .. the triggers of the popups seem to be based on absolute positioning of the cursor relative to the visible window, not the top of the document itself.

Tested Using it with JQuery 1.7.2 min, with my code, and with your examples

In a nutshell, if you scroll the page at all, all the trigger points remain positioned within the visible window as is – even though the actual trigger entities themselves have moved.

This is displayed with your example pages – providing you force the doc types to be IE 10 and Standards mode – under compatibility mode, the plugin works fine.

In compat mode, it works just as I would expect for previous browsers – but something in IE 10 Standards has confused it.

Really hope you can figure this out – I don’t think there’s a better bubble-style popup out there… and I’d hate to have to force compatibility on all the pages using it.
Hakim

August 27, 2012 at 1:37 pm (UTC 2)

Reply

Ok… about my message above, after more testing I have found that this bug only occurs when I use jquery 1.8.0

It’s working well with jquery 1.7.2 and below…
Alex

August 30, 2012 at 9:01 am (UTC 2)

Reply

Hey… How can i put dynamic informatinons into innerHTML??? For example like this

var id = $(this).attr(“id”);
var show_something = ‘Nachricht Senden‘;

$(‘.some-box’).CreateBubblePopup({
innerHtml: ”+ show_something +”,
position : ‘top’,
align : ‘center’,
themeName: ‘all-blue’,
themePath: ‘css/jquery-bubble-popup/jquerybubblepopup-themes’,
selectable: true,
height: ’100px’,
innerHtmlStyle: {
“text-align”:”center”,
“font-size”:”0.9em”,
“font-weight”:”bold”,
“padding”:”2px”,
},
openingDelay: 1000,

});

Which way is best way to put php code into jquery???
Dases

September 2, 2012 at 1:50 pm (UTC 2)

Reply

Hi all. After asynchronous loading, popup changes in size (increases) and because of his position is not correct. Overrides button, as in my case does not fit. Has anyone encountered this problem and how is it decided?
Vishakh Beharry

September 4, 2012 at 8:29 pm (UTC 2)

Reply

I have to say I really enjoy your space, the way you
write is awe inspiring!
Frank Indelicato

September 5, 2012 at 9:13 pm (UTC 2)

Reply

Thank you for your wonderful popup. It works great! I have run across one problem. I have a highslide popup window whose content is created via a wordpress ajax call. The ajax call creates a div containing the content and it gets appended to the html body tag. Highslide then grabs the div for display. After the div is appended I add your bubble popup. The problem is the bubble popup shows up behind and partially above the highslide popup window. I need to find a way to show it above the highslide popup window. Here are a few lines of code:

var app_content_ID = ‘appointment_’ + this.supplemental.meta_unique_id;
jQuery(‘body’).append( this.supplemental.appointment );
jQuery(‘.search_patient_info_tip’).CreateBubblePopup(); // ‘#’ + app_content_ID +
jQuery(‘.search_patient_info_tip’).mouseover(function()
{ …

app_content_ID is a div wit the content and the content contains the search_patient_info_tip class. Any ideas?
1. Frank Indelicato
  
  September 6, 2012 at 3:39 am (UTC 2)
  
  Reply
  
  Solved the problem. Why is it that the obvious is always the last thing you look at. Anyway, the bubble popup has a z-index of 100. Highslide popup windows have a z-index of 1001. I changed your css z-index to 2000 and now the bubble popup shows up above the Highslide window. Could you please add this to your css so that it will be in any new versions you issue from now on. Thank you again for a great plugin.
Goggles McDuff

September 10, 2012 at 7:05 pm (UTC 2)

Reply

I’m having an IE specific problem – have spent two days on it now and am running out of hair!

I was hoping some fresh eyes could shed a light on it:

http://workflow.8010.co.uk/bubbletest.php?preview=true

In Firefox/Chrome etc the red “possible email dup” pops up a bubble.

In IE – it doesn’t!.

Even worse? no JS errors – anywhere. It just does nothing.
I’ve even stripped out all the other JS libs that pages uses to see if there was a conflict. There’s hardly anything in it now.

Am lost! anyone any ideas?

Thanks in advance!
1. Goggles McDuff
  
  September 11, 2012 at 1:17 pm (UTC 2)
  
  Reply
  
  After more testing – this is a jQuery version conflict.
  
  Latest has this problem but using 1.7.2 seems to fix the issue – works in all browsers.
  
  Thanks
  
  Craig
Berker

September 11, 2012 at 5:01 pm (UTC 2)

Reply

Hi,

First of all thanx for what u’ve done with this plugin. It is wonderful. But unfortunately i came across a problem!!. Please help me about this wrong reposition,
(when mousing over the box on the left, popup appears pretty high than where it should be.)

jQuery Bubble Popup – How to make a Bubble Popup always visible

buttons with bubble popup

on the LEFT side if it’s possible
Luca

September 11, 2012 at 7:41 pm (UTC 2)

Reply

Hi Max
I’ve found a strange issue while using this plugin and jquery dialog widget,
It looks like the Dialog Z-Index is higher than the popup one.
Just for testing purposes i’ve tried adding z-index attribute to popup code and it works fine:

y.css({ “z-index”:10000, //high level
opacity: 0,
top: “0px”,
left: “0px”,
position: “absolute”,
display: “block”
});

I hope it make sense for you.
Regards
Luca
Berker

September 11, 2012 at 11:10 pm (UTC 2)

Reply

Hi,

First of all thanx for what u’ve done for people, really appreciate. I have only one problem with the plugin, i will be very pleased if you can answer me. i put the html below, there is a “”"”Reposition Problem”"”" when alwaysVisible: true

<!–
$(document).ready(function () {

$('div.button').CreateBubblePopup({ themePath: 'images/jquerybubblepopup-themes' });

var positions = {
'left': { position: 'top' },
};

for (var classname in positions) {
$('.' + classname).SetBubblePopupOptions({
alwaysVisible: true,
position: positions[classname].position,
innerHtml: 'Bubble Popup! qwe qwe qwe qw eqwe qwe qw eqwe q we',
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'center'
},
themeName: 'all-black',
themePath: '/jquerybubblepopup-themes'
});
};

});

buttons with bubble popup
on the LEFT side if it’s possible
Berker

September 12, 2012 at 1:24 pm (UTC 2)

Reply

This is the rest;

buttons with bubble popup
on the LEFT side if it’s possible
Berker

September 12, 2012 at 1:25 pm (UTC 2)

Reply

This is the rest;

buttons with bubble popup
on the LEFT side if it’s possible
Zax Lofful

September 20, 2012 at 2:22 am (UTC 2)

Reply

Hello Max,

I do have a question for you about your software. I am not sure if it is a bug or intended to look like this.

My website (which I listed) has a pop-up in the corner for login. Unfortunately the pop-up will not align properly to the element it is attached to. The issue is the tail. It doesn’t align in the correct place.

I have selected bottom and right. It should align on the bottom of the element and line up on the right side…It doesn’t at all the bubble almost appears to do whatever it wants.

If you go to my page in the upper right corner you can see what I mean.
Leela Krishna

September 20, 2012 at 4:17 pm (UTC 2)

Reply

Hi,

Can you please give an example how can we load a mvc view using bubble popup?

Leela Krishna
Mark

September 20, 2012 at 6:24 pm (UTC 2)

Reply

Is there a way to resize/redraw the bubble after it’s displayed? I’m trying to add to a bubble while it’s shown and it doesn’t redraw properly, just extends to fit what i’ve added…
ginndee

September 26, 2012 at 5:37 am (UTC 2)

Reply

i want to display two popup bubble onload. but my problem is only one popup show…
any body could help me…

you can email me at ginndee.claramount@gmail.com
thanks
Pierrot

October 9, 2012 at 1:00 am (UTC 2)

Reply

Hello
Greate tool. Congratulation.
I am using it with a form and when the form is sent, I which to have a bobble open on all field which have a class=”error”.

I do not understand why, only the last of my 3 fields (with the class=”error”, has the bobble showed.

How can I make sure that the bobble is automaticaley showed when a field has a specific class?

Here is a part of my code.
For each input with the class requiered, it check if the field is empty. If yes, it add a new class error. Then for the first, and then the next input, it run that code
function(input){ $input = $(input); if($input.val().trim().match('^[\s]*[\s]*$')){
$input.addClass('error'); // This works. The class "error" is well added to all empty field var options = { innerHtml : 'Ce champs ne doit pas être vide',//$(this).attr('title'), themePath : 'jquery-bubble-v3/jquerybubblepopup-themes', themeName : 'all-grey', distance : '10px', width : '300px', alwaysVisible : true, //closingDelay : 10000 } $('.required.error').each(function(index) { console.log(index); }); // But this is apply only to the last empty field. It semas that the first and the second, the bubble is removed so quickly that we do not see it. $input.CreateBubblePopup(); //show the bubble popup with new options $input.ShowAllBubblePopups(options); //$input.SetBubblePopupOptions(options);
//$input.FreezeAllBubblePopups(); }

Many thank for your help
Jon Collar

October 26, 2012 at 1:16 pm (UTC 2)

Reply

Great plugin! I have used it on a website we are developing for a client and have used in as part of an area map. It works great in all browsers apart from Internet Explorer!. You just need to hover over the 360 image of a kitchen carcase in the middle of the page. With IE, the hover stays on the left hand side of the entire page and doesn’t sit in the middle of the hovered image in the centre of the page as it should.
lose 10 pounds

November 6, 2012 at 4:21 am (UTC 2)

Reply

At this time it sounds like BlogEngine is the preferred blogging platform available right now.
(from what I’ve read) Is that what you’re using on your
blog?
Shnalla

November 9, 2012 at 1:39 pm (UTC 2)

Reply

Hi Max,

Thank you for this great plugin !
I do have a little problem with the plugin. There is whitespace inside the bubble, you can look at it here :

http://www.shnalla.com/wintech/wp-content/themes/wintech/test.php

How can I solve it ?
Anwesha

December 5, 2012 at 10:14 pm (UTC 2)

Reply

Hi Max,

Can I have the download link for jQuery Bubble Popup v.1.1?? It would be really helpful!! thanks!!!

Anwesha
Der_Knob

December 16, 2012 at 2:42 pm (UTC 2)

Reply

Hi,

I have a problem with the mouse over event.
If the div who is initiated withe the bubble popup is not visible anymore (for example: another div above it, like a fixed menu bar at the top of the page, or a not modal popup window is opened), it still brings up the popup… who I can prevent the popup to show up, if the div it self is not visible for the user?

Any idea?
The plugin is great! Thanks!
Bransin

January 5, 2013 at 2:06 am (UTC 2)

Reply

This plugin is not compatible with IE10 as it falls back to using gifs when IE10 supports gradients and box-shadows.
Marc

April 16, 2013 at 10:58 am (UTC 2)

Reply

Hi!!! Seems to not be compatible with jquery 1.9.1 too!!
1. Marc
  
  April 16, 2013 at 11:06 am (UTC 2)
  
  Reply
  
  TypeError: a.browser is undefined
  1. Marc
    
    April 16, 2013 at 11:14 am (UTC 2)
    
    Reply
    
    Need to have jquery-migrate-1.1.1.min.js loaded to work with 1.9.1 jquery!!