第一個jQuery嘗試不工作

我想展示一個漂亮的工具提示，使用名爲qTip的jQuery插件。第一個jQuery嘗試不工作

但是，我收到了一個奇怪的結果。我已經將jQuery庫添加到我的Scripts文件夾中，並創建了一個「3rdParty」文件夾，其中包含qTip文件。

我然後引用他們在我的Asp.Net母版：

<head runat="server"> 
    <link rel="shortcut icon" href="/favicon.ico" /> 
    <meta http-equiv="refresh" content="1140" /> 
    <asp:ContentPlaceHolder ID="head" runat="server"> 
    </asp:ContentPlaceHolder> 

    <script type="text/javascript" src="/Scripts/jquery-2.0.3.min.js"></script> 
    <script type="text/javascript" src="/Scripts/3rdParty/jquery.qtip-1.0.0-rc3.min.js"></script> 

    <script> 
     $(document).ready(function() { 
      $('#test').qtip({ 
       content: 'Mice eat cheese, but not stones.' 
      }); 
     }); 
    </script> 

</head>

然後我有我的屏幕上的圖像，而我只是想顯示工具提示當鼠標在它：

<a href="/default.aspx"> 
    <asp:Image ID="test" runat="server" ImageUrl="/Images/main_icon.png" BorderStyle="None" /> 
</a>

但是，當我加載屏幕並將鼠標移動到圖像上方時，屏幕最左側出現一個「工具提示」，顯示預期的文本，但當我移動屏幕時它永遠不會消失鼠標離開。另外，它只是文本。沒有真正的工具。

enter image description here

來源

2013-08-20 Craig

在瀏覽器控制檯還任何錯誤qtip1不再開發利用[qtip2]（http://qtip2.com /）而不是 –

您正在使用jtiery的最新版本的qtip的一個非常舊的版本，它可能有腳本錯誤，因爲一些不兼容的更改。請嘗試使用[qtip2]（http://qtip2.com/）而不是 –

謝謝你們！現在更新新版本並修改問題。現在，它顯示了工具提示，但只要移動到圖像上，工具提示就會出現在屏幕的最左側，並且永遠不會消失。 – Craig

您正在使用jtiery的最新版本的qtip的一個非常舊的版本，它可能有腳本錯誤，因爲一些不兼容的更改。請儘量使用代替

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.css"> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js"></script> 
<img id="test" src="dd.png"/>

然後

$(document).ready(function() { 
    $('#test').qtip({ 
     content: 'Mice eat cheese, but not stones.' 
    }); 
});

演示：Fiddle

來源

2013-08-20 01:27:22

謝謝Arun！這已修復它。缺少的CSS鏈接解決了格式化問題，新版本可以正常工作。謝謝！ – Craig

我只是看着文檔和他們有顯示選項和隱藏，像這樣：

$('ul:last li.active').qtip({ 
    content: 'This is an active list element', 
    show: 'mouseover', 
    hide: 'mouseout' 
})

所以也許添加顯示和隱藏你的qtip功能。

來源

2013-08-20 01:14:07 BoxerBucks

第一個jQuery嘗試不工作

回答

相關問題