專案中用到的功能，在這裡記錄下, 方便日後複用。

滑鼠懸停，出現一個懸浮框，懸浮框中可以自定義一些內容，使用 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實現懸浮視窗的效果