Question

我正在尝试使用名为qTip的jQuery插件显示一个很好的工具提示。

然而，我得到一个奇怪的结果。我已将jQuery库添加到我的Scripts文件夹中，并创建了一个＆＃34; 3rdParty＆＃34;文件夹关闭，qhich有qTip文件。

然后我在我的Asp.Net MasterPage中引用它们：

<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>

但是，当我加载屏幕并将鼠标移到图像上时，会出现一个工具提示＆＃39;屏幕的最左侧出现在屏幕上，显示预期的文本，但是当我移开鼠标时它永远不会消失。而且，它只是文字。没有真正的tooltop。

enter image description here

Answer 1

您使用的是旧版本的qtip和最新版本的jquery，由于某些不兼容的更改，它可能会出现脚本错误。请尝试使用qtip2代替

<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

Answer 2

我只是查看了文档，他们有像显示和隐藏的选项：

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

所以也许可以添加节目并隐藏到你的qtip功能。

第一个jQuery尝试不起作用

2 个答案: