Rich Text Tooltip Plugin For jQuery - bubbleBox

bubbleBox is a lightweight and customizable jQuery tooltip plugin for creating a rich text popup box that can be attached to any DOM element within the document.

How to use it:

1. Download and load the bubbleBox.min.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/bubbleBox.min.js"></script>

2. Insert your tooltip content to the target element.

<div class="myContainer">
  The Tooltip Will Be Attached To This Container
  <div class="tip">
    Tooltip Content Here
  </div>
</div>

3. Initialize the plugin to enable the tooltip.

$(function () {

  addBubbleAll('.myContainer', '.tip', {
    // apply the tooltip to multiple elements
  })

  // or
  addBubble('.myContainer', '.tip', {
    // apply the tooltip to a single element
  })

})

4. There are a few options that you can pass through to customize your tooltip further.

addBubbleAll('.myContainer', '.tip', {

  // 'top', 'bottom'
  // 'left', 'right'
  direction: 'right',

  // offset in px
  offsetX: 10,
  offsetY: 0,

  // animation options
  fadeInDelay: 300,
  fadeOutDelay: 0,
  fadeInTime: 100,
  fadeOutTime: 0,
  
})

---

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