JQuery QTip2 не отображается или ссылки должным образом - PullRequest
0 голосов
/ 25 сентября 2011

Я использую jQuery qTip2 для подсказок в моем приложении Rails.Я хочу, чтобы во всплывающей подсказке отображалась ссылка, но я не могу ее правильно отобразить (или саму подсказку).

Вот мое application.js qTip jQuery:

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

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

Цель состоит в том, чтобы при наведении указателя мыши на ссылку во всплывающей подсказке «Имя статьи» вы могли перейти к статье.

Кто-нибудь может мне помочь исправить это?

1 Ответ

2 голосов
/ 25 сентября 2011

Вы включаете JavaScript qTip2 дважды ...

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

Вам нужен только один экземпляр qTip2; выберите один, чтобы сохранить, и удалите другой.

Вы также включаете CSS-файл qTip2 дважды, но, если он идентичен, это не вызовет серьезной проблемы ... это просто расточительно и избыточно. Удалить одну ...

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

EDIT:

Это даже не похоже на действительный 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>
...