我正在尋找一個智能的工具提示彈出在JavaScript或jquery

我正在尋找一個工具提示彈出窗口，它被追加到我的網站上的一些鏈接。我正在尋找一個智能的工具提示彈出在JavaScript或jquery

當用戶鼠標懸停時，工具提示彈出窗口應該淡入。
工具提示彈出窗口在用戶導航時應保持活動狀態。
工具提示將會彈出到頂部/底部或側面取決於它的位置（例如在底部，如果沒有在頂部有足夠的空間）

popup size

任何想法或建議的東西喜歡這個？也許jquery？

來源

2011-08-30 Lukas

你可以嘗試qtip -

http://craigsworks.com/projects/qtip/

來源

2011-08-30 17:44:27 ipr101

qtip很棒。允許自定義樣式/動畫，並且內置邏輯以確保工具提示不會將自己置於屏幕外。 –

我相信這個漂亮的jQuery插件就可以了你

Coda Popup Bubbles

來源

2011-08-30 17:45:54 c0deNinja

的訣竅是在CSS，沒有JavaScript的。首先以靜態HTML的形式創建你想要它看起來活躍的方式。然後隱藏它並在jQuery中使用.fadeIn()。

我想嘗試這樣的事：

<a href="foo.htm" class="tooltip"> 
    Foo 
    <div>Tooltip content</div> 
</a>

CSS：

a.tooltip { 
    position: relative; 
} 
a.tooltip > div { 
    display: none; 
    position: absolute; 
    bottom: 100%; 
    left: 50%; 
    margin-left: -150px; 
    width: 300px; 
}

的JavaScript：

$("a.tooltip").hover(function() { 
    $("> div", this).fadeIn(); 
}, 
function() { 
    $("> div", this).fadeOut(); 
});

編輯：這裏有一個演示：http://jsfiddle.net/gilly3/b3PjW/。我收回有關JavaScript不是棘手部分的部分。計算屏幕邊緣的鏈接意味着大量的定位邏輯。我的jsfiddle做了一點，但沒有考慮到滾動條或垂直定位。這對你來說可能是或可能不是問題。如果是這樣，一個好插件應該爲你做所有這些。

來源

2011-08-30 17:56:19 gilly3

我寫了一個新的基於jQuery的模塊，因爲我想Twitter's nice tooltip。但是他們的工具提示太簡單了，沒有任何移入或移出動畫。 API在實際的程序化環境中毫無用處。即便如此，我也發現它有時是錯誤的。 所以我寫了自己的工具提示副本（從頭開始！我甚至沒有看他們的代碼），並帶來了一些額外的好處。轉到www.matooltip.com，並在主頁面底部看到的高級示例中查看（單擊「代碼行」鏈接）。爲了符合你的所有預期目的，你必須成爲一名高級用戶，並接管內容管理，並設置你自己的事件處理程序，就像我在這個特例中做的那樣。不過，這個模塊對你來說真的是一件輕而易舉的事情。定位工具提示和所有顯示邏輯都是內置的！我希望補充網站有你需要的所有答案，隨時與我聯繫，否則我會幫助你。我甚至可以編寫新版本並實現一些新功能，如果你願意，並且它們符合我對該模塊的總體設計目標。

來源

2013-02-04 10:50:53

使用純CSS。 Hint.css可能是有用的。

<p class="hint--bounce" class="hint--rounded" data-hint="Popup text!">blah</p>

來源

2013-03-13 08:41:10 blessenm

作爲一個~4800字節的文件（最小化），這是一個非常好用的純CSS解決方案。編輯答案包括一個例子。 –

我正在尋找一個智能的工具提示彈出在JavaScript或jquery

回答

相關問題