jQuery Speech Bubble Style Tooltip Plugin - Bubble

A very small jQuery plugin used to create speech bubble-style tooltips attaching to any Html elements. The bubble tooltip can be auto re-positioned to keep it visible within the viewport. To dismiss the bubble tooltip, click anywhere outside the bubble or click the bubble's dismiss icon. The bubble tooltip will auto-dismiss 2 seconds after moving the mouse off the bubble or the associated target. Ajax content is supported as well.

See also:

• Speech Bubble-Like jQuery Tooltip Plugin - jtooltip
• Simple Chat Bubble Like Tooltip Plugin - Speech Bubbles Tooltip

How to use it:

1. Include the needed jQuery JavaScript library in your html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Include the jQuery bubble plugin in your html page. Make sure to place the bubble.js after jQuery JavaScript library.

<link rel="stylesheet" href="css/bubble.css">
<script src="bubble.js"></script>

3. Create a bubble tooltip attaching to an element with an Html5 data-bubbleid attribute as follows.

<div id="demo" data-bubbleid="demoBubble"> 
  
  <div id="demoBubble" class="BubbleDiv" style="display:none; top:55px; left:-5px;">
    <div class="BubbleShadow">
      <div class="Bubble">
        <div class="BubbleHeader">
          <div class="BubbleTitle"> Tooltip Title </div>
          <div class="BubbleCloseBtn"></div>
        </div>
        <div class="BubbleContent"> Tooltip content </div>
        <div class="bottomLeftArrow"></div>
        <div class="bottomRightArrow"></div>
        <div class="topLeftArrow"></div>
        <div class="topRightArrow"></div>
      </div>
    </div>
  </div>
</div>

4. Initialize the plugin with one JS call. This example shows a bubble that is specifically positioned and overrides the default policy on positioning.  Since the bubble container is a child of the target, it can be positioned relative to the target. Check out the demo page for more examples.

$(document).ready(function() {
  $("#demo")
    .bubble();
});

5. Default plugin options.

openDelay: 500,
closeDelay: 2000,
editable: "false"

Change log:

2014-11-16

• Add option to support direct editing of bubble title and content

---

This awesome jQuery plugin is developed by byennaco. For more Advanced Usages, please check the demo page or visit the official website.