jQuery qTip Plugin, how to split 'title' attribute and apply styles

Question

I'm trying to use the qTip jQuery plugin here: http://craigsworks.com/projects/qtip2/demos/#mouse

I got the code to work based on the demo, but I'd like to be able to "explode" the content from the TITLE attribute, and have the first item of the array be the "header" and the second item be the "content."

I have the following code:

<script>
$(document).ready(function()
{

   $('.tip3').qtip({
      content: {
            text: function(api) {
                  var titleAttr = $(this).attr('title');
                  var titleAttrArray = titleAttr.split(' :: ');
                  return titleAttrArray[1];
               },
            title: {
               text: function(api) {
                  // Retrieve content from TITLE attribute of the $('.selector') element
                  // return $(this).attr('title');
                  return titleAttrArray[0];
               }
            }
         },
      position: {
         my: 'top left',
         target: 'mouse',
         viewport: $(window), // Keep it on-screen at all times if possible
         adjust: {
            x: 10,  y: 10
         }
      },
      hide: {
         fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
      },
      style: 'ui-tooltip-youtube'
   });

});
</script>


<div class="box tip3" title="Some cool title here! :: Some subheader here?">
   <h3>Hover over this box to see mouse tracking in action</h3>
</div>

Just for reference, the code below works perfectly fine by just fetching TITLE and not doing anything with it:

<script>
$(document).ready(function()
{
   $('.tip2').qtip({
      content: {
            text: 'I really like owls!',
            title: {
               text: function(api) {
                  // Retrieve content from TITLE attribute of the $('.selector') element
                  return $(this).attr('title');
               }
            }
         },
      position: {
         my: 'top left',
         target: 'mouse',
         viewport: $(window), // Keep it on-screen at all times if possible
         adjust: {
            x: 10,  y: 10
         }
      },
      hide: {
         fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
      },
      style: 'ui-tooltip-youtube'
   });

});
</script>

Any ideas/insights would be fantastic! Still a newbie trying to figure jQuery out :).

Answer 1

You can't access titleAttrArray in your title function as its not in scope. Just process the title attribute twice or use another attribute.

$('.tip3').qtip({
    content: {
        text: function(api) {
            return $(this).attr('title').split(' :: ')[1];
        },
        title: {
            text: function(api) {
                return $(this).attr('title').split(' :: ')[0];
                //OR
                return $(this).attr('title_header');
           }
        }
    }
});