Threaded Mode | Linear Mode

vijay_kart

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.

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

<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

***Craig***

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.