项目中用到的功能，在这里记录下, 方便日后复用。

鼠标悬停，出现一个悬浮框，悬浮框中可以自定义一些内容，使用 bootstrap 的 popover 插件实现。可以直接看参考资料中的文章，插件使用说明更详细。或看组件文档说明：https://v4-alpha.getbootstrap.com/components/popovers/

示例

示例是鼠标移动上面后悬浮显示多张图片的缩略图，要引入文件jquery.min.js,bootstrap.min.js

html

里面有 jsp 的标签和代码

<a image-list='${item.imageList}' class="bind_hover_card" data-toggle="popover" data-placement="auto" data-trigger="hover">${fn:length(item.imageList)} 张</a>

js

$(function() {
        $("[data-toggle='popover']").popover({
            html : true,
// title: title(),
            //delay:{show:500, hide:1000},
            content: function() {
// console.log($(this).attr("image-list"));
                var imageList = $(this).attr("image-list");
                return imageContent(imageList);
            }
        });
    });

    function imageContent(imageList) {

        var obj = JSON.parse(imageList);
        var content = '';
        for (var p in obj) {
            console.log(obj[p].url);
             content += '<div><img src="' + obj[p].url  +'"' + 'width="100px" height="100px"' + '/></div>';
        }
        var data = $(content);

        return data;
    }

参考资料

利用bootstrap实现悬浮窗口的效果