我在找一個jQuery提示

Question

我在找一個jQuery類似工具提示＃1的這一個：

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

我personnaly用這一個，發現它很定製實用：http://craigsworks.com/projects/qtip2/demos/#tips然後你可以輕鬆定製css以獲得與stackoverflow相同的內容。

Answer 3

我會將StackOverflow的彈出式窗口作爲更多的模態對話框而不是工具提示。我覺得這是jQuery的模態對話框最簡單的使用方法：

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