Question

我在我的Rails应用程序中使用jQuery qTip2作为工具提示。我希望工具提示显示一个链接，但我无法正确显示（或工具提示本身）。

这是我的application.js qTip jQuery：

$(document).ready(function() {
    $('.article span[alt]').qtip({
        position: {
            my: 'bottom center',
            at: 'bottom center'
        },
        hide: {
            fixed: true
        },
        style: {
            width: 200
        }
    });
});

我的html.erb显示工具提示：

<li class="article"><span alt=<%= link_to article.name, article_path %>>
    <%= article.body %>
</span></li>

我的标题：

<link href="/stylesheets/jquery.qtip.css?1316753274" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.qtip.min.css?1316753274" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery.js?1316133561" type="text/javascript"></script>
<script src="/javascripts/application.js?1316962938" type="text/javascript"></script>
<script src="/javascripts/jquery.qtip.js?1316753274" type="text/javascript"></script>
<script src="/javascripts/jquery.qtip.min.js?1316753274" type="text/javascript"></script>

编辑 - 以下是显示的HTML：

<li class="article"><span alt=<a href="/articles/2">Article Name</a>>
Testing
</span></li>

目标是将鼠标悬停在测试上会显示工具提示链接“文章名称”，它会将您带到文章中。

任何人都可以帮我解决这个问题吗？

Answer 1

您要包括qTip2 JavaScript两次......

<script src="/javascripts/jquery.qtip.js?1316753274" type="text/javascript"></script>
<script src="/javascripts/jquery.qtip.min.js?1316753274" type="text/javascript"></script>

您只需要一个qTip2实例;选择一个保留并删除另一个。

你还包括两次qTip2 CSS文件，但如果相同，这不会造成重大问题......这只是浪费和冗余。删除一个......

<link href="/stylesheets/jquery.qtip.css?1316753274" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.qtip.min.css?1316753274" media="screen" rel="stylesheet" type="text/css" />

修改

这甚至不是有效的HTML ...

<span alt=<a href="/articles/2">Article Name</a>>Testing</span>

alt属性需要在引号内跟随文字。 alt="my alternate text"

如果没有引号和AFAIK，则无法使用alt标记，您无法将HTML置于alt属性中。

http://www.w3.org/QA/Tips/altAttribute

这可能有用......

<span alt="<a href='\/articles\/2'>Article Name<\/a>">Testing</span>

jQuery qTip2没有正确显示或链接

1 个答案: