Selecting a pattern within HTML with jQuery

I'm trying to convert an old Tips plugin from Mootools to jQuery: http://flowplayer.org/tools/tooltip/index.html

Everything's in working order, except I'm having trouble re-styling the value of the attribute in the HTML line. For instance, I might have:

<img src="/link/to/image.jpg" class="Tips2" title="Header Line :: Description Paragraph Here" />

The effect works perfectly fine, except I want to have the "Header Line" portion stylized with CSS one way, and the "Description Paragraph Here" portion stylized with CSS another way. I'm still fairly n开发者_如何学运维ew to javascript and am not sure how to select these two patterns to apply a css class to them.

The original Mootools script I converted from came with this feature prepackaged (so that the pattern you see in the above HTML was already linked to the classes ".tool-title" for the "Header Line", and ".tool-text" for the "Description Paragraph Here").

How can I do this in jQuery?

Is this what you have in mind: http://jsfiddle.net/g_thom/Za3uY/3/?

The jQuery splits the two strings into an array, as Dimitar mentions, and places them into separate divs to be styled differently. Both display on hover over the image. Not sure if this is exactly what you're after.

I set the title attribute temporarily to blank so it doesn't show up on hover 'doubled' along with the custom tooltips, then swap it back in on mouseout so accessibility issues are somewhat minimized.

Tested in Chrome and FF4 so far.