Avatar of weaverk
Flag for Switzerland asked on

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:

   /* 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

JavaScriptjQueryWeb Development

Avatar of undefined
Last Comment

8/22/2022 - Mon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

this is my solution, comments in the code in case somebody else can benefit from this too...
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck