/codabubble

jquery plugin based on Remy Sharp's Coda popup bubbles

Primary LanguageJavaScript

jquery.codabubble

Usage

HTML structure

<div class="bubbleInfo">
  <p class="trigger">+ $1.50 GS fee</p>
  <div class="popup">
    <p>Gamestaq charges a small fee to each the buyer and the seller to keep things going.</p>
  </div>
</div>

jQuery

$('.bubbleInfo').codabubble();

$('.bubbleInfo').codabubble({
    direction: 'right',
    offset: 250
});

Options

  • distance: 10, // distance traveled by bubble during animation.
  • offset: 0, // offset distance. either an integer of a function that returns an integer
  • time: 250, // milliseconds. duration of the animation.
  • hideDelay: 500, // milliseconds. time before bubble fades out (after mouseout)
  • direction: ‘up’, // either ‘left’, ‘right’, down’ or ‘up’
  • triggerClass: ‘.trigger’, // class of the trigger (in your markup)
  • popupClass: ‘.popup’ // class of the bubble (in your markup)