<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/prototip/css/prototip.css" type="text/css" rel="stylesheet" />
<script src='http://ddata.over-blog.com/xxxyyy/0/37/17/67/prototip/js/prototype.js' type='text/javascript'>
</script><script type='text/javascript' src='http://ddata.over-blog.com/xxxyyy/0/37/17/67/prototip/js/prototip.js'>

<div id="tip1">Exemple 1</div>
<script type="text/javascript" language="javascript">
new Tip('tip1', 'Simple tooltip');
new Tip('box1', "hook: { target: 'topLeft', tip: 'bottomRight'}", {title: 'hooking', className: 'pinktip', hook:{target: 'topLeft', tip: 'bottomRight'}, offset: {x:0,y:0} });</script>

<div id='tip2'>2 : Add a title</div>
<div id='tip3'>3 : Add offset</div>
<div id='tip4'>4 : Fixed positioning</div>
 <div id='tip5'>5 : A different target</div>
 <div id='tip6'>6 : Hooking!</div>
 <div id='tip7'>7 : HTML</div>
<div id='tip8'>8 : Effects!</div>
 <div id='tip9'>9 : More effects</div>
<div id='tip10'>10 : Update</div>   &nbsp;&laquo; <a href='javascript:;' onclick='updateExampleTip("pinktip", "Usefull when you want to update your tooltips with Ajax");'>1</a> | <a href='javascript:;' onclick='updateExampleTip("darktip", "Or if you just want to give them a new style.");'>2</a> | <a href='javascript:;' onclick='updateExampleTip("default", "Just call newTip() again on the element to update it&rsquo;s tooltip");'>3</a>
 <div id='tip11'>11 : Delay (500ms)</div>
 <div id='tip12'>12 : Click me!</div>
<div id='tip13'>13 : Links</div>
<div id='tip14'>14 : Toggle (click)</div>
<div id='tip15'>15 : Style with CSS</div>
<div id='tip16'>16 : Element as tooltip</div>
<div id='tip17'>17 : Auto hide</div>
<div id='tip18'>18 : Stay within the viewport</div>

new Tip('tip2', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.', {title : 'Lorem Ipsum'});
    new Tip('tip3', 'offset {x:60,y:-100}', {title: 'Tooltip with offset', className: 'darktip', offset: {x:60, y:-100}});
    new Tip('tip4', 'Fixed tooltip', { fixed: true, offset: { x: 0, y:18 } });
    new Tip('tip5', 'Instead of putting the tooltip on the element you are hovering, you can target a different element.', { className: 'darktip', title: 'This tooltip has &quot;11&quot; as target.', target: 'tip11', offset: {x:0,y:0}});
    new Tip('tip6', 'This tooltip hooks to the top right corner of this element.<br/> You can do a lot more with hooking, read below.', { className: 'pinktip', title: 'hooking', hook: {tip: 'bottomLeft', target: 'topRight'}});
    new Tip('tip7', 'You can use html within a tooltip. <br/><strong>Go </strong><span style="text-decoration: line-through;">crazy</span><br/><br/><img src="images/demo_flower.gif" alt=""/>', {title: 'HTML', className: 'darktip'});
    new Tip('tip8', 'This tooltip uses &quot;appear&quot;', { className: 'pinktip', title: 'Show your tooltips with Scriptaculous effects!', effect: 'appear', hook: {target: 'topRight', tip: 'bottomLeft'}});
    new Tip('tip9', 'This tooltip uses the &quot;blind&quot; effect.', { title: 'more effects', className: 'darktip', effect: 'blind', hook: {target: 'topRight', tip: 'bottomLeft'}});
   
    new Tip('tip10', 'Click any of the links on the right, 1, 2, 3 to update this tooltip.', {title : 'Update existing tooltips'});
   
    new Tip('tip11', 'This tooltip opens with a 500ms delay.<br/><br/>By default all tooltips open with a short delay, so you can mouseover your page safely without opening up tooltips right away.', {title : 'Delay', className: 'darktip', delay: 0.5});
    new Tip('tip12', 'You have complete control over the way you open and <a href="javascript:;" class="close">close</a> tooltips.', {title : 'More control', className: 'pinktip', showOn: 'click', hideOn: {element: '.close', event: 'click'}, closeButton: true});
    new Tip('tip13', Projects.getTipContent('starbox'), { className: 'ideaTip', effect: 'blind', hook: { tip: 'bottomLeft', target: 'topRight' }, hideOn: false, hideAfter: 1.5, offset: { x: 5, y: 5 }});
    new Tip('tip14', 'This tooltip will hide itself when you click the link again.', {title : 'Toggle tooltips', className: 'pinktip', showOn: 'click', hideOn: 'click', closeButton: true});
    new Tip('tip15', 'Everything you need to customize your tooltips can be done through CSS. Even the close buttons can be styled with a mouseover state.', {title : 'Style your tooltips', className: 'protoClassic', showOn: 'mousemove', hideOn: {element: 'closeButton', event: 'click' }});
   
    var supportClone = $('donate').cloneNode(true);
    supportClone.insert({ top: '<p>Instead of using a string for the content, you can insert an element created through to DOM. The content inserted into this tooltip is a clone of the support message.<strong/><p/>' });
    new Tip('tip16', supportClone, { title : 'Element as tooltip', hideOn: { element: 'tip', event: 'mouseout'}, hideAfter: 1.5, effect: 'appear', hook: { tip: 'topLeft', target: 'bottomLeft'}, offset: { x: 0, y: 5 }, className: 'pinktip'});
   
    new Tip('tip17', 'This tooltip will automatically hide after a two seconds of inactivity. That means, when you are not on the tooltip itself or on the element that opened the tooltip.', { title : 'Auto hide', hideOn: false, hideAfter: 2, hook: { tip: 'topRight', target: 'topLeft'}, offset: { x: -5, y: 0 }});
   
    new Tip('tip18', '<p>By default, all tooltips will stay within the viewport. When you resize your browser window you can notice it on this tooltip.</p><p>Tooltips that use hooking or have a fixed position will not stay within the viewport. Prototip assumes that you know what you want when you use those options.</p>', { title : 'Stay within the viewport', className: 'darktip' });

new Tip('box1', "hook: { target: 'topLeft', tip: 'bottomRight'}", {title: 'hooking', className: 'pinktip', hook:{target: 'topLeft', tip: 'bottomRight'}, offset: {x:0,y:0} });
    new Tip('box2', "hook: {target: 'topLeft', tip: 'bottomRight'},<br/> offset{x:0, y-10}", {title: 'hooking with offset', className: 'pinktip', hook:{target: 'topLeft', tip: 'bottomRight'}, offset: {x:0,y:-10} });
    new Tip('box3',  "hook: {target: 'topRight', tip: 'bottomLeft'}", {title: 'hooking', className: 'pinktip', hook: {target: 'topRight', tip: 'bottomLeft'}, offset: {x:0,y:0} });
    new Tip('box4',  "hook: {target: 'topLeft', tip: 'topRight'}, <br/>offset: {x: -5, y: 0}", {title: 'hooking with x-offset',className: 'pinktip', hook:{target: 'topLeft', tip: 'topRight'}, offset: {x:-5,y:0} });
    new Tip('box5', "target: 'box1', <br/>hook: {target: 'topLeft', tip 'bottomRight'}", {title: 'target box1 instead', className: 'pinktip', target: 'box1', hook:{target: 'topLeft', tip: 'bottomRight'}, offset: {x:0,y:0} });
    new Tip('box6', "hook: {target: 'topRight', tip: 'topLeft'}, <br/>offset: {x: 5px, y: 0}", {title: 'hooking with x-offset', className: 'pinktip', hook:{target: 'topRight', tip: 'topLeft'}, offset: {x:5,y:0}, viewport: true });
    new Tip('box7', "hook: {target: 'bottomLeft', tip: 'topRight'}", {title: 'hooking', className: 'pinktip', hook:{target: 'bottomLeft', tip: 'topRight'}, offset: {x:0,y:0} });
    new Tip('box8', "hook: {target: 'bottomLeft', tip: 'topLeft'},<br/> offset: {x: 0, y: 5}", {title: 'hooking with y-offset', className: 'pinktip', hook:{target: 'bottomLeft', tip: 'topLeft'}, offset: {x:0,y:5} });
    new Tip('box9', "hook: {target: 'bottomRight', tip: 'topLeft'},<br/> offset: {x: 5, y: 5}", {title: 'hooking with x and y-offset', className: 'pinktip', hook:{target: 'bottomRight', tip: 'topLeft'}, offset: {x:5,y:5} });