craigsworks.com - Support Forum - [Solved] Making tooltip appear in page content when hovering over nav link

I have created a web page with a map on the right side and navigation column on the left side. Each item in the navigation column corrresponds to a location, marked by a little pin icon, on the map. Thanks to Qtip, I was easily able to get the tooltip to appear when hovering over the pin icons. Yay! I know almost nothing about writing javascript or jquery, so this was pretty cool.

I also wanted to make the tooltip appear, in exactly the same manner and place, when hovering over the corresponding item in the navigation column on the left.

I emailed Craig for help and he suggested that I "simply use multiple show targets, one that points to the regular target, and the other to the corresponding nav link. "

I did and it works! Here is the code for one of the map pins, where .tbird1 is a class applied to the navigation link, and .tbird2 and .tbird3 are classes applied to the image where the tooltip pops up.

Thanks for the help, Craig!

JS Code

<!--Tbird menu item script-->
 
<script>$(".tbird1").qtip({
   content: '<txp:image id="76" />',
   position: { 
	    target: $('div.tbird2') 
		},
   style: { 
      width: 187,
      padding: 5,
      background: '#FFFFFF',
      color: 'black',
      textAlign: 'left',
      border: {
       <!--  width: 1,-->
         radius: 2,
         color: '#5E9B42'
      },
      tip: 'topLeft',
      name: 'dark' // Inherit the rest of the attributes from the preset dark style
   }
})
</script>
 
 <!--Tbird map script-->
<script>$(".tbird3").qtip({
   content: '<txp:image id="76" />',
 
   style: { 
      width: 187,
      padding: 5,
      background: '#FFFFFF',
      color: 'black',
      textAlign: 'left',
      border: {
       <!--  width: 1,-->
         radius: 2,
         color: '#5E9B42'
      },
      tip: 'topLeft',
      name: 'dark' // Inherit the rest of the attributes from the preset dark style
   }
})
</script>

PS, the site is built on Textpattern, another excellent open-source product. That's why the images appear with the <txp:.... /> syntax.

craigsworks.com - Support Forum

Bluepurl