Выбор шаблона в HTML с помощью jQuery

Question

Я пытаюсь преобразовать старый плагин Tips из Mootools в jQuery: http://flowplayer.org/tools/tooltip/index.html

Все в рабочем порядке, за исключением того, что у меня возникают проблемы при повторной стилизации значения атрибута в строке HTML,Например, у меня может быть:

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

Эффект отлично работает, за исключением того, что я хочу, чтобы часть «Заголовок строки» была стилизована под CSS в одну сторону, а часть «Описание абзаца здесь» - под CSSпо-другому.Я все еще довольно новичок в javascript и не уверен, как выбрать эти два шаблона, чтобы применить к ним класс css.

Оригинальный скрипт Mootools, из которого я преобразовал, поставлялся с этой предварительно упакованной функцией (так,см. выше, HTML уже был связан с классами ".tool-title" для "строки заголовка" и ".tool-text" для "описания абзаца здесь").

Как я могу сделать это в jQuery?

Answer 1

Это то, что вы имеете в виду: http://jsfiddle.net/g_thom/Za3uY/3/?

JQuery разбивает две строки в массив, как упоминает Димитар, и помещает их в отдельные элементы div, чтобы по-разному их стилизовать.Оба отображаются при наведении на изображение.Не уверен, что это именно то, что вам нужно.

Я временно установил атрибут заголовка пустым, чтобы он не отображался при наведении курсора на два раза вместе с пользовательскими подсказками, а затем снова включил егоограничена, поэтому проблемы с доступностью несколько минимизированы.

Протестировано в Chrome и FF4.