动态生成jQuery Tooltip异常：hover时出现额外128px图片

你遇到的额外128px图片，根源是同时使用了两种tooltip实现方式：

1. 你自己通过hover事件手动创建了一个包含256px大图的div弹窗，用来作为自定义tooltip；
2. 你又调用了$(document).tooltip(...)初始化了jQuery UI的Tooltip插件，这个插件会自动匹配所有img元素（因为设置了items: 'img'），并生成一个包含128px图片的默认tooltip。

当你hover小图时，这两个逻辑同时触发：你自己的div弹窗显示，同时jQuery UI的Tooltip也显示，所以就出现了“莫名多出来的128px图片”。

根据你的需求，只需要保留其中一种实现方式即可：

方案1：保留自己的自定义tooltip，移除jQuery UI Tooltip代码 #

直接删除这段冲突的代码：

$(document).tooltip({
    items: 'img',
    content: function() {
        return '<img src="' + $(this).attr('src') + '" width="128px" height="128px" />';
    }
});

这样hover时就只会显示你自己创建的256px大图弹窗了。另外可以把定位相邻div的写法优化得更可靠一点，比如把$('#' + $(this).attr('id') + '+div').show()改成$(this).next('div').show()，避免DOM结构变化导致选择器失效。

方案2：改用jQuery UI Tooltip实现，移除手动hover逻辑 #

如果你想利用jQuery UI Tooltip的自动定位、样式优化等特性，可以删掉自己的hover事件和tmpDivCard相关代码，只保留图片创建和Tooltip初始化，同时把content改成你想要的大图尺寸：

for(idx = 0; idx < 2; idx++){
    var tmpImg = $('<img>')
        .attr('src', 'https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg')
        .attr('id', idx)
        .width('32px')
        .height('32px');
  
    $('body').append(tmpImg);
}

// 初始化jQuery UI Tooltip，使用你需要的大图尺寸
$(document).tooltip({
    items: 'img',
    content: function() {
        return '<img src="' + $(this).attr('src') + '" width="256px" height="256px" />';
    }
});

这样hover时就会显示jQuery UI生成的256px大图tooltip，不会有额外的图片干扰了。

内容的提问来源于stack exchange，提问作者blfuentes