Home/ Questions/Q 5994015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:45:28+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0