Question

I’m using jQuery qTip2 for tooltips in my Rails app. I want the tooltip to display a link, but I can’t get that (or the tooltip itself) to show properly.

Here’s my application.js qTip jQuery:

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

My html.erb to show the tooltip:

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

And my header:

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

EDIT – Here’s the HTML that shows:

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

The goal is that hovering over testing shows the tooltip link “Article Name”, which takes you to the article.

Can anyone help me fix this?

Answer 1

You are including the qTip2 JavaScript twice…

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

You only need one instance of qTip2; pick one to keep and remove the other one.

You are also including the qTip2 CSS file twice but, if identical, this would not cause a major problem… it’s just wasteful and redundant. Remove one…

<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:

This is not even close to being valid HTML…

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

• The alt attribute need to be followed by text within quotation marks. alt="my alternate text"
• You cannot use the alt tag without the quotation marks and AFAIK, you cannot put HTML within the alt attribute.

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

This might work…

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