2012-02-17 173 views
2

我沒有運氣讓工具提示在Firefox上工作。所以我決定試一試jQuery tooltip插件。但它不適合我。jQuery的工具提示插件沒有提示工具提示

正在通過用戶操作將圖像插入到html中。狀態變量包含字符串,下面的html部分(div class =「statusicons」...)是在insert和tooltip()函數運行後在螢火蟲中看起來像的樣子。 tooltip()不以任何方式修改html。但是,我沒有得到「tooltip()不是函數」,所以我必須假設找到了代碼插件。

<script src="/plugins/snap/jquery.tooltips.min.js" type="text/javascript"></script> 
... 
jQuery("#devinfo").jqGrid('setCell',id,'status',status); 
$("#davo img[title]").tooltip(); 


<div class="statusicons" id="davo"> 
<img width="24" height="24" title="Drive not mounted" alt="Drive not mounted" src="/plugins/snap/images/mount2.png"> 
&nbsp;<img width="24" height="24" title="Drive not shared" alt="Drive not shared" src="/plugins/snap/images/share2.png"> 
&nbsp;<img width="24" height="24" title="Drive not busy" alt="Drive not busy" src="/plugins/snap/images/busy2.png"> 
&nbsp;<img width="24" height="24" title="Drive is spinning" alt="Drive is spinning" src="/plugins/snap/images/drive1.png"> 
&nbsp;<img width="24" height="24" title="Drive is precleared" alt="Drive is precleared" src="/plugins/snap/images/precleared1.png"> 
</div> 

回答

0

修訂答:

試試你的頁面的這個

頭部分爲<head></head>標籤使用樣式表爲您提示,並首先設置其顯示爲無。

這裏是根據您所提供的一小樣機:

<html> 
<head> 
<style type="text/css"> 
.tooltip { 
    display:none; 
    background:transparent url(/images/some_image.jpg); 
    font-size:12px; 
    height:200px; 
    width:300px; 
    padding:25px; 
    color:#fff; 
} 
</style> 
</head> 
<body> 
<script  
     type="text/javascript" 
     src="/jquery/jquery-latest.js" > 
    </script> 
    <script  
     type="text/javascript" 
     src="/jquery/jquery.tools.min.js" > 
    </script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $("#davo img[title]").tooltip(); 
}); 
    </script> 
    <br /><br /><br /><br /> 
    <div class="statusicons" id="davo"> 
    <img width="100" height="100" id="haha" title="Drive not mounted" src="/images/some_image_2.jpg"> 
    </div> 

</body> 
</html> 

現在:

你既然是動態添加圖片到頁面中的代碼在其中添加了圖像到頁面您將需要執行以下JQuery語句:

$(function(){$("#davo img[title]").tooltip();}); 

這樣每whther後的document.ready存在的圖像,或者你強迫它在每一個你添加的東西時它會被綁定時間

看到這個鏈接也。 http://flowplayer.org/tools/demos/tooltip/index.html

+0

按照給定的要求,「用戶操作將圖像插入html中「。但是,即使您在文檔加載時添加了此項,但在動態添加任何新圖像時,它也不起作用。 – 2012-02-17 06:16:52

+0

我們不需要添加$(function(){});只需$('#davo img [title]')。tooltip();會做。 此外,我們需要使用新創建的元素,而不是「id」。 謝謝Pasha Immortals – 2012-02-17 07:33:09

+1

@Vanga Sasidhar:是的,如果你動態添加,你確實需要它。因爲你需要強制它。 – 2012-02-19 20:10:20