bubbletip

A jQuery plugin to create a bubble-stylized tooltip popup

download

http://code.google.com/p/bubbletip/

features

• multiple tips on a page
• multiple tips per jQuery element
• tips open outward in four directions:
  • up
  • down
  • left
  • right
• tips can be:
  • anchored to the triggering jQuery element
  • absolutely positioned
  • opened at the current mouse coordinates
  • anchored to a specified jQuery element
• IE png transparency is handled via filters

examples

MOUSEOVER to open a tooltip above, below, to the left or to the right of any element.

MOUSEOVER a trigger element [ bind / unbind ] to open a tooltip above and below a target element.

FOCUS & BLUR

{ deltaDirection: 'up' }

{ 
    deltaDirection: 'down', 
    deltaPosition: 100,
    offsetTop: 10 
}

{ 
    deltaDirection: 'left', 
    animationDuration: 100,
    offsetLeft: -20 
}

{ 
    deltaDirection: 'up', 
    positionAtElement: $('#a1_target')
}

{ 
    deltaDirection: 'down', 
    positionAtElement: $('#a1_target')
    delayShow: 500,
    delayHide: 1000			
}

click to bind a second bubbletip 
to the trigger element

$('#a1_trigger').bubbletip($('#tip1_trigger2'), {
    positionAtElement: $('#a1_target'),
    deltaDirection: 'down',
    delayShow: 500,
    delayHide: 1000
});

click to unbind the second bubbletip

$('#a1_trigger').removeBubbletip($('#tip1_trigger2'));

{
    deltaDirection: 'right',
    bindShow: 'focus',
    bindHide: 'blur'
}

usage

the "trigger" element is the element upon which the bubbletip is instantiated:

<a id="a1_up" href="#">above</a>

the "tip" element should be hidden (display:none) and contain the contents of the tip to be displayed:

<div id="tip1_up" style="display:none;"><pre class="tip">{ deltaDirection: 'up' }</pre></div>

the javascript to create the bubbletip:

<script type="text/javascript">
    $(document).ready(function() {
        $('#a1_up').bubbletip($('#tip1_up'));
    });
</script>

the javascript to remove all tips from the trigger element:

$('#a1_up').removeBubbletip();

the javascript to remove an array of specified tips from the trigger element:

$('#a1_up').removeBubbletip([$('#tip1_up'), ...]);

options

• positionAt: element(default) | body | mouse » the tip location type
• positionAtElement: » the element to anchor the tip at (e.g. $('#target')); leave blank to anchor to the trigger; requires positionAt: element;
• offsetTop: 0 » offset the vertical position
• offsetLeft: 0 » offset the horizontal position
• deltaPosition: 30 » the distance the tip will travel during animation
• deltaDirection: up(default) | down | left | right » the direction the tip will animate
• animationDuration: 250 » the animation duration
• animationEasing: swing(default) | linear » standard animation easing
• bindShow: mouseover(default) | focus | click | ... » the bind event(s) to show the tip
• bindHide: mouseout(default) | blur | ... » the bind event(s) to hide the tip
• delayShow: 0 » the time in ms to delay showing the tip
• delayHide: 500 » the time in ms to delay hiding the tip
• calculateOnShow: false » recalculate the position prior to showing

changes

v1.0.5 » 2010-01-20

• tested (lightly) with jQuery-1.4.0, IE6+, FF3.5, Chrome3.0
• fixed IE6, IE7 window.resize bug
• fixed $.fn.removeBubbletip()
• added options.calculateOnShow

v1.0.4 » 2009-12-14

• added $.fn.removeBubbletip() to allow a tip and its bindings to be removed from the DOM
• renamed options.mouseoutDelay to options.delayHide
• added options.delayShow
• added namespace binding on all events
• minor bug fixes
• reworked documentation

v1.0.3 » 2009-12-09

• added options.bindShow and options.bindHide to allow control over the event binding
• added a check (which didn't work) to see if the tip is already a descendant of a table.bubbletip element
• fixed a window.resize issue causing the tips to be active via .show() [thanks Turan Sadri]

v1.0.2 » 2009-11-16

• fixed IE alpha filters relative path issue
• added conditional IE css

v1.0.1 » 2009-11-11

• minor bug fixes