jQuery Speech Bubble Style Tooltip Plugin - Bubble

jQuery Speech Bubble Style Tooltip Plugin - Bubble
File Size: 24 KB
Views Total: 3287
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.