0

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

但是，我得到了一个奇怪的结果。我已将 jQuery 库添加到我的 Scripts 文件夹中，并在其中创建了一个“3rdParty”文件夹，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>

但是，当我加载屏幕并将鼠标移到图像上时，“工具提示”出现在屏幕最左侧的边框上，显示预期的文本，但是当我将鼠标移开时它永远不会消失。此外，它只是文本。没有真正的工具栏。

在此处输入图像描述

4

2 回答 2

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.'
    });
});

演示：小提琴

于 2013-08-20T01:27:22.603 回答
0

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

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

因此，也许可以将显示和隐藏添加到您的 qtip 函数中。

于 2013-08-20T01:14:07.933 回答