Rails dynamic content in jQuery qTip2

Question

I got my jQuery qTip2 working but I have one last thing to solve: getting dynamic content to display as a link in the tooltip. (I'm new to all this so please bear with me.)

Here's what I have now to get the qTip to show:

$(document).ready(function() {
    $('span[title]').qtip({
        position: {
            my: 'bottom center',
            at: 'top center'
        },
        hide: {
            fixed: true
        },
        style: {
            classes:'ui-tooltip-shadow ui-tooltip-rounded'
        }
    });
});

Here's my erb file:

<li class="article"><span title="<%= author.name %>">
  <%= article.body %>,&nbsp;
</span></li>

The HTML rendered:

<li class="article"><span title="My Name">
  Testing,&nbsp;
</span></li>

What I want to do though is display a link as the qTip that shows the author's name and links to their profile. I know I can add a link in my application.js file like so:

    **content: {
        text: '<a href="link">My name</a>'},** 

However, how can I make it so the content adds dynamically from my database? Ideally I'd want something like:

    **content: {
        text: '<a href="`<%= article.author.profile %>`">`<%= author.name %>`</a>'},** 

I know from a previous answer that there is an issue with producing valid HTML. However I'm hoping someone can help me out here.

Answer 1

One way you can accomplish this is to do an ajax call to the server to get the dynamic HTML you want to display in the tooltip depending on the content. You can use the api method of onRender to accomplish this:

$(document).ready(function() {
    $('span[title]').qtip({
        position: {
            my: 'bottom center',
            at: 'top center'
        },
        hide: {
            fixed: true
        },
        style: {
            classes:'ui-tooltip-shadow ui-tooltip-rounded'
        },
        api: {
           onRender: function() {
              $.post(urlToContent, function (content) {
                 // Update the tooltip with the dynamic content
                 api.updateContent(content);
              });
           }
        }
    });
});

EDIT:

You can do the same thing in qtip2 by using the ajax method:

$(document).ready(function() {
   $('span[title]').qtip({
        position: {
           my: 'bottom center',
           at: 'top center'
        },
        hide: {
           fixed: true
        },
        style: {
           classes:'ui-tooltip-shadow ui-tooltip-rounded'
        },
        content: {
           text: 'Loading...', // The text to use whilst the AJAX request is loading
           ajax: {
              url: '/path/to/file', // URL to the local file
              type: 'GET', // POST or GET
              data: {} // Data to pass along with your request
           }
        });
    });

Take a look at the ajax link to see the other ways to get data from the sever, but the example above will work if you are getting back basic HTML.