鼠标悬停出现提示信息怎么做

概述

提示:指启示,提起注意或给予提醒和解释。

在 excel 中会经常用到给某个格子增加提醒信息,比如金额提示输入数值或最大长度值等等。设置方式也有多种,简单的,仅为单元格插入批注就可以了,也有复杂的有效性验证方式。下图为批注方式:

另外,在网页设计中也常常看到同样功能,常见的帮助提示框(tips),鼠标悬停在帮助图标上时,显示所有的帮助信息。也不难,几行 JS 脚本的事儿。

润乾报表支持在 Web 发布,衣食父母们同样希望产品具备鼠标移动到某个位置时显示一些提示信息的功能。

润乾想客户之所想,不仅支持静态信息,也允许开发者设置动态提示信息(一个单元格,可根据条件判断显示不同信息)。

今天先入个门,介绍一下静态信息的设置方法,后续在结合合适场景介绍动态提示。

Ok!开始进入正题,润乾报表怎么设置静态提示信息呢? 以“工资单”为例,多数人不清楚其中的考勤扣除怎么算,这里便可以为“考勤扣除”设置提示。

操作步骤

准备工资条报表模板

准备一张结果如下图所示的网格式报表

模板设计如下

注意:该例子目的是为标题字段增加提示,所以不考虑数据来源问题,第三行的数据均为固定数值。

模板中设置静态信息提示(WEB–提示)

在模板中选中 E2,属性区“WEB”—“提示”—“值”编辑框

预览报表结果

提示仅在 web 端有效,所以先发布报表,浏览器预览,当鼠标悬停在“考勤扣除”时效果如下

通过设置单元格提示,轻松做到鼠标悬停的提醒功能。如同强制分页、动态背景色等小技巧一样,针对这种比较常用的功能,报表工具在设计时都已考虑到。遇到类似问题依然建议查阅手册,对应设置即可。

原文地址:https://www.cnblogs.com/xiaohuihui-11/p/12047373.html

时间: 2024-10-07 10:07:19

鼠标悬停出现提示信息怎么做的相关文章

jQuery鼠标悬停显示提示信息窗体

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标悬停显示提示信息窗体</titl

jQuery鼠标悬停显示提示信息窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>鼠标悬停显示提示信息窗口</title&g

鼠标悬停图片移动的效果

当前很多购物网站,像京东,蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移,下移,左移或者右移效果, 实现代码很简单,就用css3的transform便可实现. 下列代码实现的是鼠标悬停,div向上移动30px,鼠标拿开div恢复原始位置. css: <style> div{ margin-top: 100px; width: 100px; height: 100px; background: pink; transition:All 0.4s ease-in-out;//让移动效果变得平滑自

7种鼠标悬停效果,多样的图片说明展示

今天我们要为您展示如何创建一些简单又不失时尚的图片说明悬停效果.我们的想法应用悬停效果来显示图片对应的标题,作者和链接按钮.对于一些的效果,我们将使用3D变换.这样做的目的是保持奇妙的效果,并为许多不同的变化提供了灵感. 在线演示      下载源码 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型

CSS3实现鼠标悬停扩展效果

我们在做导航标签的时候,有时会出现空间过于拥挤需要隐藏部分内容的情况,所以在这里我自己写了一个鼠标悬停显示扩展内容的效果,如下图所示. 总的来说效果还是比较好实现,但是比较头疼的是三角部分使用了伪元素::after,而对父元素设置 over-flow:hidden 时也会把伪元素给隐藏掉.最后想的办法是把文字和图标用一个 <span> 包裹住然后对其设置over-flow属性. HTML代码: 1 <div id="nav"> 2 <a id="

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

div css鼠标悬停锚文本超链接文字背景颜色或图片变化(体感音乐) css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇.(体感音乐) 此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式.利用以下代码: a{...} 原始超链接默认样式设置a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)一.链接文字无背景鼠标经过悬停

selenium webdriver + junit 鼠标悬停,出现另一个元素,点击这个元素的解决方法

转载自http://blog.csdn.net/hcx1234567/article/details/17605533 经千辛万苦,终于解决了 UI TA(test automation) 中的这个难题,必须记录一下. 前提是:需要测试的这个页面是用 google 的 angularjs 写的.许多页面效果是用 angularjs 自带的一些事件结合 css hover实现的.测试的 UI TA 框架用的是 selenium webdriver + junit . 问题是:页面上有一个效果:点击

vue鼠标悬停事件

v-bind:title="message" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例化</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js&q

HTML+CSS鼠标悬停效果

HTML+CSS实现鼠标悬停效果 HTML: <link href="style.css" rel="stylesheet"> <a class="social" href="https://webbb.be" target="_blank"> <div class="front"> <i class="fa fa-facebook&q