Bubble

Responsive jQuery Bubble Plugin

A stylish popup that will stick to any element. Plugin can be used to show help or ask for some action from users or introduce user with new features on a webpage. Plugin works on all modern desktop, iPad and other tablets.

Examples

Top, Left, Right, Bottom Bubbles

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Linked bubbles

When you close this bubble it will automatically show next bubble.
This bubble will showup when you click "Second" button or when you close Start bubble.

Features

  1. Works Everywhere
  2. Sticks to any element
  3. Custom Html Content Allowed
  4. Use CSS
  5. Mutliple Positioning
  6. Link Two or More Bubbles

How To Use

This script goes into head section 

<!-- Include jQuery Library -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Include bubble CSS -->
<link href="bubble.css" rel="Stylesheet"
    type="text/css" />
<!-- Include bubble Library -->
<script src="bubble.js" type="text/javascript"> </script>
<script type="text/javascript">
    $(document).ready(
        function () {
            $("#bubble1").bubble({ Position: 'top' });
            $("#bubble2").bubble({ Position: 'left' });
            $("#bubble3").bubble({ Position: 'right' });
            $("#bubble4").bubble({ Position: 'bottom' });
            $("#startbtn").bubble({ Position: 'right', OnClose: function() { $("#secbtn").bubble("open"); } });
$("#secbtn").bubble({Position: 'right'});
        }
    );
</script>

HTML Example 

<button type="button" id="bubble1" data-bubbleid="bubble1content" class="btn btn-primary btn-large">
                    Top bubble</button>
                <div class="rst-bubble" id="bubble1content">
                    <div class="rst-bubble-body" style="width:300px; height:300px;">
                        Bubble Content Here
                    </div>
                </div>
<button type="button" id="bubble2" data-bubbleid="bubble2content" class="btn btn-primary btn-large">
                    Left bubble</button>
                <div class="rst-bubble" style="width: 200px;" id="bubble2content">
                    <div class="rst-bubble-body">
                        <img src="rocky1.jpg" />
                    </div>
                </div>
<button id="bubble3" type="button" data-bubbleid="bubble3content" class="btn btn-primary btn-large">
                    Right bubble</button>
                <div class="rst-bubble" id="bubble3content">
                    <div class="rst-bubble-body">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                        unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>
<button type="button" id="bubble4" data-bubbleid="bubble4content" class="btn btn-primary btn-large">
                    Bottom bubble</button>
                <div class="rst-bubble" id="bubble4content">
                    <div class="rst-bubble-body">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                        unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>
                <button type="button" id="startbtn" data-bubbleid="startbubble" class="btn btn-primary btn-large">Start</button>
<div class="rst-bubble" id="startbubble">
   <button class='rst-bubble-close'>&times;</button>
   <div class="rst-bubble-body">When you close this bubble it will automatically show next bubble.</div>
</div>
<button type="button" id="secbtn" data-bubbleid="secondbubble" class="btn btn-primary btn-large">Second</button>
<div class="rst-bubble" id="secondbubble">
   <button class='rst-bubble-close'>&times;</button>
   <div class="rst-bubble-body">This bubble will showup when you click "Second" button or when you close Start bubble.</div>
</div>

Usage Options

Default function

Option Default Description
Action 'click' 'click' | 'hover'

Event to show bubble.

Position 'right' 'right' | 'left' | 'top' | 'bottom'

Set position of bubble around element.

Distance 5 Integer

Set Distance of bubble from the element.

Duration 1000 Integer

Works on Action : 'hover'. Set duration to hide bubble after mouse out.

OnClose null function() { }

Called when bubble is closed.

OnShow null function(){ }

callback function, called when bubble is shown

CloseOthers false true | false

If this option is true than all other bubbles will be closed before this bubble is shown.

Open function

Option Default Description
bubbleid ''

Id of bubble.

Close function

Option Default Description
bubbleid ''

Id of bubble.

Download Bubble Files

  1. bubble.css
  2. bubble.js