Используйте jQuery, чтобы найти и добавить подсказку к изображению

Question

Хорошо, я пытаюсь выполнить простую подсказку, которая при наведении курсора на название цвета показывает небольшое изображение этого цвета. HTML-разметка выглядит следующим образом:

<label class="colorPicker">
    <input type="radio" checked="" id="20" value="20" name="id[2]">
    <img width="16" height="16" title=" DinoBlack Mat " alt="DinoBlack Mat" src="images/attributes/color/dinoblack_mat.jpg">DinoBlack Mat
</label>
<label class="colorPicker">
    <input type="radio" id="874" value="874" name="id[2]">
    <img width="16" height="16" title="XrayBlue shiny" alt="XrayBlue shiny" src="images/attributes/color/xrayblue_shiny.jpg">XrayBlue shiny
</label>

Я использую плагин jQuery "Подсказка" и добавил следующее в свой основной js-файл:

$('.colorPicker').tooltip({ 
    track: true,
    delay: 0,
    showURL: false,
    fade: 250,
    bodyHandler: function() {
        return $("<img/>").attr("src", [THE SOURCE FOR THE IMAGE]);
    }
});

Идея состоит в том, что изображение должно быть скрыто по умолчанию. Но когда вы наводите курсор мыши на текст, появляется небольшая миниатюра, облегчающая распознавание цвета. Проблема в том, что я понятия не имею, как получить src для миниатюры. Я не знаю, как извлечь src из img внутри выбранного элемента. Я пробовал разные комбинации с использованием этого ключевого слова, но ничего не получалось.

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

Я действительно надеюсь, что вы можете мне помочь. Я искал в Интернете в течение нескольких дней без какой-либо удачи. Я в отчаянии: D

/ Миккель Лунд

Answer 1

$('.colorPicker').tooltip({ 
    track: true,
    delay: 0,
    showURL: false,
    fade: 250,
    bodyHandler: function() {
        return $("<img/>").attr("src", $(this).children('img:first').attr('src'));
    }
});

и все готово:)