在 web 端我們查看一些數據時，為了方便用戶理解數據的計算方法，會在鼠標指向格子的時候出現一些提示，鼠標移開的時候提示就不顯示了，再比如說，鼠標指向頁面按鈕，出現按鈕功能的提示，這樣的效果在潤乾中可以輕松實現，也有相應的文檔介紹 鼠標懸停出現提示信息怎么做 。
除了上面說的那種靜態信息外，在潤乾報表中也可以實現鼠標指向顯示對應的動態數據，還可以實現鼠標指向顯示圖片的效果哦！
這里以學生信息表為例，實現鼠標指向不同人員的照片，可以在旁邊顯示出相應的大圖。
具體實現方法
制作一張學生信息表
數據庫中存的人員基本信息是在一條記錄里，而我們常見的人員信息表是將一條記錄里的數據在不同行中顯示，這種報表相對於網格式報表來說格式更加隨意，我們稱之為自由報表，關於如何實現自由格式報表可以參考
數據庫中的圖片字段怎么在報表中呈現 （圖片字段呈現） 。
報表模板設計如下圖所示
增加要顯示的圖片的圖層
在報表中追加一列，將 J2~J6 合並單元格，並將合並后的 J2 單元格數據類型設置為 html, 單元格的內容為：
="<div id='sjbb_hover'> <p>人員信息高清免冠證件照 </p> <img src='http://localhost:6868/demo/reportJsp/images/"+F3+".jpg' width=150px> </div>"
頁面中增加鼠標懸停時圖層的樣式
在 showReport.jsp 中增加如下的樣式：
<style> #sjbb_hover{ padding: 10px 10px 10px 10px; border-radius: 3px; box-shadow: 0px 0px 2px #ccc; background: #fff; color: #000; position: absolute; text-align: center; display: inline-block; left: 532px; top: 47px;} </style>
頁面中增加圖層的顯示隱藏的 JS 方法
$("#sjbb_hover").hide();
function show()
{
$("#sjbb_hover").show();
}
function hide()
{
$("#sjbb_hover").hide();
}
在報表中給圖片增加 html 事件
選中 H2，設置 HTML 事件為 onmouseover=‘show()’ onmouseout=‘hide()’
經過以上設置我們就完成了鼠標懸停顯示圖片的需求了。
瀏覽器中通過http://localhost:6868/demo/reportJsp/showReport.jsp?rpx= 學生信息表.rpx 就可以看到效果了。
翻頁查看另一人的信息時，鼠標指向是對應人員的照片。
通過這樣的設置，我們還可以實現鼠標指向，顯示個二維碼，用戶可以通過手機掃碼二維碼，在手機上查看更多需要了解的信息。
