天天看點

js滑鼠懸停事件_滑鼠懸停出現提示資訊怎麼做

概述

提示:指啟示,提起注意或給予提醒和解釋。

在 excel 中會經常用到給某個格子增加提醒資訊,比如金額提示輸入數值或最大長度值等等。設定方式也有多種,簡單的,僅為單元格插入批注就可以了,也有複雜的有效性驗證方式。下圖為批注方式:

js滑鼠懸停事件_滑鼠懸停出現提示資訊怎麼做

另外,在網頁設計中也常常看到同樣功能,常見的幫助提示框(tips),滑鼠懸停在幫助圖示上時,顯示所有的幫助資訊。也不難,幾行 JS 腳本的事兒。

js滑鼠懸停事件_滑鼠懸停出現提示資訊怎麼做

潤乾報表支援在 Web 釋出,衣食父母們同樣希望産品具備滑鼠移動到某個位置時顯示一些提示資訊的功能。

潤乾想客戶之所想,不僅支援靜态資訊,也允許開發者設定動态提示資訊(一個單元格,可根據條件判斷顯示不同資訊)。

今天先入個門,介紹一下靜态資訊的設定方法,後續在結合合适場景介紹動态提示。

Ok!開始進入正題,潤乾報表怎麼設定靜态提示資訊呢? 以“工資單”為例,多數人不清楚其中的考勤扣除怎麼算,這裡便可以為“考勤扣除”設定提示。

js滑鼠懸停事件_滑鼠懸停出現提示資訊怎麼做

操作步驟

準備工資條報表模闆

準備一張結果如下圖所示的網格式報表

js滑鼠懸停事件_滑鼠懸停出現提示資訊怎麼做

模闆設計如下

js滑鼠懸停事件_滑鼠懸停出現提示資訊怎麼做

注意:該例子目的是為标題字段增加提示,是以不考慮資料來源問題,第三行的資料均為固定數值。

模闆中設定靜态資訊提示(WEB–提示)

在模闆中選中 E2,屬性區“WEB”—“提示”—“值”編輯框

js滑鼠懸停事件_滑鼠懸停出現提示資訊怎麼做

預覽報表結果

提示僅在 web 端有效,是以先釋出報表,浏覽器預覽,當滑鼠懸停在“考勤扣除”時效果如下

js滑鼠懸停事件_滑鼠懸停出現提示資訊怎麼做

通過設定單元格提示,輕松做到滑鼠懸停的提醒功能。如同強制分頁、動态背景色等小技巧一樣,針對這種比較常用的功能,報表工具在設計時都已考慮到。遇到類似問題依然建議查閱手冊,對應設定即可。

另外,在後續的文章中,會結合相應場景介紹動态提示資訊的設定方法,敬請關注。。。

更多前端展現效果的相關問題請檢視:前端效果相關問題分類導航

* web 報表輕松實作資料異常預警功能

* 報表實時重新整理顯示時間

* 報表工具如何實作“點選檢視原圖”

* 潤乾報表中進度條的一種實作方式

* 報表怎樣實作滾動的公告效果?

* HTML 事件 – 滑鼠移入高亮顯示

* 點選表頭切換升降序排序方式