Custom content for each qTip tooltip

Question

I have a list of search results and for each one I want to be able to display more information about the result in question in a tooltip.

I have got as far as getting a qTip tooltip to appear when I rollover each a element but I don't understand how to get custom content into the tooltip for each result.

I guess this is largely because of my very limited jQuery knowledge.

In old style JavaScript I would pass a variable that was the tooltip content from the function call attached to the <a> tags. As there is no function call written in the <a> tag for jQuery tooltip it looks like this isn't the way to do it now.

Currently I have this in the head:

<script type="text/javascript" 
       src="/assets/templates/unaexchange/js/jquery.qtip-1.0.0.min.js"></script>

<script>
$(document).ready(function() {
$(".tooltip").qtip({
   content: 'this is the content',
   position: {
      corner: {
         target: 'topRight',
         tooltip: 'bottomLeft'
      }
   }
});
});

And then the body has <a class="tooltip">Link</a> and then I have the standard :

<div class="qtip qtip-stylename">
  <div class="qtip-tip" rel="cornerValue"></div>
  <div class="qtip-wrapper">
    <div class="qtip-borderTop"></div> 
             <!-- Only present when using rounded corners-->
    <div class="qtip-contentWrapper">
        <div class="qtip-title"> 
             <!-- All CSS styles...-->
        <div class="qtip-button"></div> 
             <!-- ...are usually applied...-->
    </div>
    <div class="qtip-content">an attempt at standard content ?></div> 
             <!-- ...to these three elements!-->
  </div>
  <div class="qtip-borderBottom"></div> 
             <!-- Only present when using rounded corners-->
  </div>
</div>

But this isn't being displayed and I don't know how to create a specific chunk of HTML for each tooltip.

Is my approach wrong?

Should I create all the individual tooltips containing the custom content with separate IDs and then pick these IDs up and display or something like that?

Answer 1

you can omit the content property to use the title of the <a> tag:

// use title attribute
$(".tooltip").qtip({
    position: {
        corner: {
            target: 'topRight',
            tooltip: 'bottomLeft'
        }
    }
});

or you can use a jquery selector. for example:

// use jquery selector
$(".tooltip2").each(function() {

    var content = $($(this).attr("href")).html();

    $(this).qtip({
        content: content,
        position: {
            corner: {
                target: 'topRight',
                tooltip: 'bottomLeft'
            }
        }
    });
});

Example here: jsFiddle