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.

MOUSEOVER any trigger, trigger, trigger, trigger to open a tip on a target.

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'
}

bubbletip
bubbletip
bubbletip
bubbletip

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">
    $(window).bind('load', 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