title: jQuery qTip Plugin, how to split 'title' attribute and apply styles
body: <p>I'm trying to use the qTip jQuery plugin here: <a href="http://craigsworks.com/projects/qtip2/demos/#mouse" rel="nofollow">http://craigsworks.com/projects/qtip2/demos/#mouse</a></p>
  
  <p>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."</p>
  
  <p>I have the following code:</p>
  
  <pre><code>&lt;script&gt;
  $(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'
     });
  
  });
  &lt;/script&gt;
  
  
  &lt;div class="box tip3" title="Some cool title here! :: Some subheader here?"&gt;
     &lt;h3&gt;Hover over this box to see mouse tracking in action&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Just for reference, the code below works perfectly fine by just fetching TITLE and not doing anything with it:</p>
  
  <pre><code>&lt;script&gt;
  $(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'
     });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any ideas/insights would be fantastic!  Still a newbie trying to figure jQuery out :).</p>