• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 309
  • Last Modified:

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

Open 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 }
});

}); 

Open in new window

0
weaverk
Asked:
weaverk
  • 2
1 Solution
 
weaverkAuthor Commented:
$(document).ready(function () {
    $('area').each(function () { //loop through each hotspot, get the necessary values, and set them into required spots in that qtip
        urlLink = $(this).attr('href'); 
        urlName = $(this).attr('alt'); 
        $(this).qtip({

            content: {
                text: '<a href="' + urlLink + '">sometext</a>', //sometext could equally be the urlName
                title: {
                    text: urlName,
                    button: 'Close'
                }
            },
            position: {
                target: 'mouse',
                adjust: {
                    mouse: false
                }
            },
            style: {
                classes: 'qtip-light'
            },
            show: {solo: true}
        });
    });
});

Open in new window

0
 
weaverkAuthor Commented:
this is my solution, comments in the code in case somebody else can benefit from this too...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now