JS plugin Qtip2 popup customisation

on my page i have an image, with an image map e.g.

<map id="points" name="points">   
        <area shape="circle" alt="point 1" coords="79,165,5" href="chapt1.pdf">
        <area shape="circle" alt="point 2" coords="60,165,5" href="#chapt2">
        ...

Select allOpen in new window

using the qtip2 plugin, i can make the points hotspots, however, i would like to customize the popup's title and content area as below:

title text: area alt text e.g. point 1
content: clickable link to href value of area -  (<a href="chapt1.pdf">Point 1</a>) or at least, just clickable link to href value



full qtip config:

$(document).ready(function()
{
	

$('area[alt]').qtip({
   /* content: {
         attr: 'alt'
    },*/
	content: {
		attr: "href",// should be clickable link and display alt text (attr: 'alt')
		title: {text:"Download", //should be area alt text
      button: 'Close'}
         },
  position: {
             target: 'mouse', 
             adjust: {
                 mouse: false
             } 
         },
	 style: {
            classes: 'qtip-light'
        },show: { solo: true }
});

}); 

Select allOpen in new window