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 を 2 回含めています...

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

qTip2 のインスタンスは 1 つだけ必要です。1 つを選択して保持し、もう 1 つを削除します。

また、qTip2 CSS ファイルを 2 回インクルードしていますが、同一の場合、これは大きな問題にはなりません...無駄で冗長です。1つ削除...

<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引用符なしでタグを使用することはできません。また、alt属性内に HTML を配置することはできません。

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 に答える