craigsworks.com - Support Forum

Full Version: qTip with jTemplate textarea
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hey qTip folks,

I am trying to get the qTip "title" text displayed on mouse over. The code below works for me outside jTemplate. But within jTemplate it doesn't seem to work.

JS Code
<script type="text/javascript" src="/projects/qtip/js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.cineplex.com/ecms.ashx/js/jquery.qtip-1.0.0-rc3.min.js"></script>
<script class="example" type="text/javascript"> 
// Create the tooltips only on document load
$(function()
{
   $.fn.qtip.styles.toolTipStyle = { // Last part is the name of the style
   		width: 390,
	      padding: 10,	      
	      background: '#f0ca43',
	      color: 'black',	      
	      textAlign: 'left',
	      border: {
	         width: 7,
	         radius: 5,
	         color: '#f0ca43'
	      },
	      tip: 'bottomLeft',
	      name: 'dark' // Inherit the rest of the attributes from the preset dark style
   }
   // By suppling no content attribute, the library uses each elements title attribute by default
   $('#content a[href][title]').qtip({
      content: {
         text: false // Use each elements title attribute
      },
      position: {
      corner: {
         target: 'topLeft',
         tooltip: 'bottomLeft'
       }
     },	
      style: 'toolTipStyle'         // Give it some style
   });   
});
</script>


HTML Code
<textarea id="jTemplateArea">
{#template MAIN}
<div class="content"><a href="#" title="titleText">
Click Me to MouseOver</a></div>
{#/template MAIN}
</textarea>


Any suggestions would be appreciated.

Thanks a lot,
Kart
Kart, if jTemplate changes the HTML of the page (which from what I've seen it does) then you'll need to use some sort of API callback provided by the jTemplate plugin. Otherwise qTip won't be able to work properly, as the elements targeted will likely have changed/been removed by the time it comes to render.
Reference URL's