Custom content for each qTip tooltip

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?

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

Add a title attribute to each DOM element with the tooltip content that you want. E.g.,

<span class='tooltip' title='This will show up as a tooltip'>Whatever your markup happens to be</span>

or

<a class='tooltip' href='#' title='Another tooltip'>Some link</a>

The title attribute is standard in HTML 5 for all DOM elements.