jquery動態工具提示

我喜歡能夠從文件「a la ajax」風格加載工具提示....但首先我想看看我是否能夠將html文本「轉移」到標題屬性jquery動態工具提示

使用jQuery和工具提示（從http://jquery.bassistance.de/tooltip/demo/）

這裏是代碼

<div class="odeurbox"> 
<img src="odeurs/aiguilledepin.jpg" 
width="67" height="67" /> 
Aiguille de pin </div> 

<div class="tohide"> 
<h3>Agrumes :</h3> 
<p>Les agrumes sont les fruits des végétaux des g....</p> 
<em>Source : Le Petit Robert 2009</em></div>

這樣，這將是超級容易編輯（真正的文本）不隱藏到title屬性

所以，我需要添加能見度：隱藏的CSS類tohide
獲得股利帶班.tohite和PU它以前的DIV標題的全部內容

我的jQuery代碼我這樣做但不工作...什麼應該是這樣做的正確方法

總之，對於每個div與類.odeur獲取下一個（孩子？）隱藏的內容，並把它放在屬性title =''

類似的東西還沒有工作：

$('div.odeurbox').each(function(){$(this).attr("title", $('.tohide').html());});

來源

2009-09-25 menardmam

所以，你基本上想要將原始HTML存儲到標題字段？這根本行不通。它會創建不正常比例的HTML錯誤。

相反，你爲什麼不直接將文本存儲到標題字段中（但只有當你必須......一個帶有內容的Javascript對象更實用時[你可以將原始HTML存儲到它們中;]] ）

如果您將工具提示文本存儲到標題字段中，您將不需要任何Javascript來創建工具提示...瀏覽器爲您做到了這一點。

如果你確實想要一個自定義的工具提示，我會建議創建一個空的div作爲工具提示，然後從Javascript對象中提取顯示的文本。

比如：
HTML的圖像

<img id="foo" src="http://localhost/foobar.jpg">

HTML工具提示。這可以在任何地方，只要它是不是有一個元素的孩子給小費

<div id="tooltip"> 
    <h3></h3> 
    <p></p> 
    <em></em> 
</div>

的JavaScript

var my_object = new Object(); 
my_object['foo']['title'] = 'The almighty foobar'; 
my_object['foo']['description'] = 'Spy sappin\' mah Stack!'; 
my_object['foo']['source'] = 'Guide to the Universe';

然後，用jQuery

jQuery('img').hover(
    function() { 
     var tip = jQuery('#tooltip'); 
     tip.find('h3').text(my_object[this.id]['title']; 
     tip.find('p').text(my_object[this.id]['description']; 
     tip.find('em').text(my_object[this.id]['source']; 
     tip.show(); 
    }, 
    function() { 
     jQuery('#tooltip').hide(); 
    } 
).mousemove(function(e) { 
    jQuery('#tooltip').css({ 
     'top': e.PageY + 10 + 'px', 
     'left': e.PageX + 10 + 'px', 
    }) 
}

這應該工作，即使沒有任何插件。

來源

2009-09-25 15:46:50 Mike

啊，媽的，大的答案，我不希望taht多...我會重新考慮的，而事情......，讓你知道，如果它！工作！ – menardmam 2009-09-25 16:38:20

實際上，您可以將原始HTML放入標題字段。只要您將HTML中的所有引號替換爲"或使用單引號（如下所示）即可。

我以前用this tooltip來做到這一點。標題包含顯示的工具提示數據。並且該腳本在modified here的標題中找到標記時從分配的ID中提取數據。

這裏有一個如何使用這個工具提示的例子：

<a class="tooltip" href="http://www.google.com" title="<center><img src='http://www.google.com/logos/11th_birthday.gif'><br>Happy 11th Birthday Google!</center>">Google</a>

來源

2009-09-27 11:52:42 Mottie

jquery動態工具提示

回答

相關問題