Selecting a pattern within HTML with jQuery

Question

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

you read the title property into a string. you split that into an array on :: and assign the title and text into their own vars. then come back here and accept some answers. :) — Dimitar Christoff
– Dimitar Christoff, Commented Jun 6, 2011 at 10:01

g_thom · Accepted Answer · 2011-06-06 12:00:18Z

1

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.

edited Jun 6, 2011 at 12:00

answered Jun 6, 2011 at 11:39

g_thom

2,8102 gold badges21 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Selecting a pattern within HTML with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related