Je cherche une info-bulle JQuery

Question

Je cherche une info-bulle JQuery comme Stackoverflow de celui-ci:

Answer 1

HTML:

<span class="tooltip_display">Tooltip</span> 
<div class="ttip"> 
    <div class="contents">Here goes contents...</div> 
    <span class="note">(click here to close the box)</span> 
</div> 

CSS:

.ttip { 
    position: absolute; 
    width: 350px; 
    height: 100px; 
    color: #fff; 
    padding: 20px; 
    -webkit-box-shadow: 0 1px 2px #303030; 
    -moz-box-shadow: 0 1px 2px #303030; 
    box-shadow: 0 1px 2px #303030; 
    border-radius: 8px 8px 8px 8px; 
    -moz-border-radius: 8px 8px 8px 8px; 
    -webkit-border-radius: 8px 8px 8px 8px; 
    -o-border-radius: 8px 8px 8px 8px; 
    background-image:-moz-linear-gradient(top, #F45000, #FF8000); 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F45000), to(#FF8000)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F45000', endColorstr='#FF8000', GradientType=0); 
    display: none 
} 
.contents { 
    font-size: 15px; 
    font-weight:bold 
} 
.note { 
    font-size: 13px; 
    text-align:center; 
    display:block; 
    width: 100% 
} 

JQUERY:

$('.tooltip_display').click(function() { 
    $('.ttip').css({ 
     left: '20px', 
     top: '50px' 
    }).show(500) 
}); 

$('.note').live('click', 
function() { 
    $('.ttip').hide(500); 
}); 

JSFIDDLE

Answer 2

J'utilise celui-ci et personnellement trouve assez personnalisable et pratique: vous pouvez alors http://craigsworks.com/projects/qtip2/demos/#tips Personnalisez facilement le CSS pour obtenir le même résultat que stackoverflow.

Answer 3

Je classerais le popup de StackOverflow plus comme une boîte de dialogue modale que comme une info-bulle. Je trouve cette jQuery Modal Dialog la plus simple à utiliser:

http://www.ericmmartin.com/projects/simplemodal/