0

我在我的 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>

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

谁能帮我解决这个问题？

4

1 回答 1

2

您包含两次 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"
  • 你不能使用alt没有引号和 AFAIK 的标签，你不能把 HTML 放在alt属性中。

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

这可能有效...

<span alt="&lt;a href='\/articles\/2'&gt;Article Name&lt;\/a&gt;">Testing</span>
于 2011-09-25T15:29:09.840 回答