我有一個無序列表,圖像在列表左側,它們的描述在右側。我的老闆希望列表中的每個項目都能在每次用戶將每個項目放在列表中時提供工具提示。我嘗試在線使用一些jQuery插件,但它只允許一個工具提示,而不是每個項目。我需要幫助。一個很好的例子會有所幫助。工具提示對於無序列表
回答
只需將一個title
屬性添加到每個列表元素就足夠了嗎?
<li title="tooltip goes here">Blah blah blah</li>
這是一個好主意。如果用戶沒有javascript,他們會看到工具提示。如果你想看看它,大多數jQuery工具提示插件可以配置爲使用標題元素。 –
每當我想提示我用下面的插件
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
有很多的例子在那裏 有關列表:
HTML:
<ul id="mylist">
<li title="tooltip text">Something here</li>
</ul>
腳本:
$('#mylist li").tooltip();
如果用戶沒有啓動Javascript他們將看到正常的標題提示
這是我能做的最好的,這也許可以修剪簡潔,但它工作得很好:
var pageX, pageY;
$(document).mousemove(
function(e){
pageX = e.pageX;
pageY = e.pageY;
});
$('#tooltipped li[title]').hover(
function(){
var tip = $('<div />')
.addClass('tooltip')
.text($(this).attr('title'))
.css({
'position' : 'absolute',
'top' : pageY,
'left' : pageX
});
$(tip).appendTo($(this));
$(this).mousemove(
function(){
$('.tooltip').css(
{
'top' : pageY,
'left' : pageX
});
});
},
function(){
$('.tooltip').remove();
});
被修改以除去title
屬性(爲了防止第二彈出沿着jQuery的工具提示):
var pageX, pageY;
$(document).mousemove(
function(e){
pageX = e.pageX;
pageY = e.pageY;
});
$('#tooltipped li[title]')
.each(
function(){
$(this).attr('data-tooltip',$(this).attr('title')).removeAttr('title');
})
.hover(
function(){
var tip = $('<div />')
.addClass('tooltip')
.text($(this).attr('data-tooltip'))
.css({
'position' : 'absolute',
'top' : pageY,
'left' : pageX
});
$(tip).appendTo($(this));
$(this).mousemove(
function(){
$('.tooltip').css(
{
'top' : pageY,
'left' : pageX
});
});
},
function(){
$('.tooltip').remove();
});
幹得好,但你需要從每個元素中刪除'title'屬性。我看到你的工具提示和「標題」工具提示重疊。 – Blazemonger
是的,如果你看看第二個代碼塊,那就是我更新演示的原因。 (我猜,原來只是一個概念驗證......)。 –
- 1. jquery ui工具提示,顯示工具提示列表
- 2. 當根據該列對錶進行排序時,無功表列標題中的工具提示停止工作
- 3. 對行列值的工具提示?
- 4. JavaFX:工具提示 - 無法顯示工具提示
- 5. GWT列表框onmouseover工具提示
- 6. 工具提示下拉列表項目
- 7. 工具提示在列表視圖
- 8. 如何顯示無序列表元素的工具提示文本?
- 9. html5工具提示對象?
- 10. 工具提示對齊
- 11. Jfreechart工具提示不適用於時間序列
- 12. JqGrid列的工具提示
- 13. 工具提示用於.net 4.0中的下拉列表
- 14. 谷歌圖表工具提示只用無提示
- 15. 對話框列表控件的MFC工具提示
- 16. 高圖表工具提示
- 17. Google圖表工具提示
- 18. 表工具提示css
- 19. 工具提示:鑑於基於NSTableView的
- 20. 在圖表2.4中無時無刻都顯示工具提示
- 21. 工具提示無法正常工作
- 22. 工具提示無法正確顯示
- 23. highmap:無法顯示工具提示
- 24. 引導工具提示顯示類似於常規HTML工具提示
- 25. 工具提示返回[對象,對象]
- 26. asp.net工具提示對於文本內部顯示非常大
- 27. jquery工具提示進入顯示:列
- 28. jQuery的工具提示插件沒有提示工具提示
- 29. 將jQuery用於工具提示
- 30. 關於jQuery工具提示的建議
正如你所說,一個很好的例子會有所幫助。你有什麼嘗試?應該可以爲每個項目添加工具提示。 – Andre