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插件"Tooltip"，我已经在主js文件中添加了以下内容：

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

这个想法很简单，默认情况下应隐藏图像。但是当您将鼠标悬停在文本上时，小缩略图会显示出来，并且可以轻松识别颜色。问题是我还没有弄清楚如何获得缩略图的src。我不知道如何从所选元素中的img中提取src。我使用this关键字尝试了各种组合，但似乎没有任何效果。

我还尝试将src路径作为rel属性添加到标签中，但也没有任何成功。不用说我也控制PHP输出......

我真的希望你能帮助我。我在网上搜索了几天没有任何运气。我变得绝望了：D

/ Mikkel Lund

Answer 1

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

你已经完成了设定：）

使用jQuery查找并添加图像工具提示

1 个答案: