工具提示tooltip

工具提示tooltip.fgcc (1.28 MB, 下载次数: 9)

昨天 09:52 上传

点击文件名下载附件

1. .tooltip1::after {
   
2.     content: "必填，只能是ABC,这是一个工具提示"; /* 工具提示的文本内容 */
   
3.     visibility: hidden; /* 默认情况下，工具提示是隐藏的 */
   
4.     width: 150px; /* 工具提示的宽度 */
   
5.     background-color: rgb(11, 135, 236); /* 工具提示的背景颜色 */
   
6.     color: #fff; /* 工具提示文本的颜色 */
   
7.     text-align: center; /* 文本居中对齐 */
   
8.     border-radius: 5px; /* 工具提示的圆角半径 */
   
9.     padding: 5px; /* 工具提示的内边距 */
   
10.     position: absolute; /* 绝对定位，使工具提示相对于其最近的定位祖先定位 */
    
11.     z-index: 1; /* 设置 z-index，以确保工具提示位于其他元素之上 */
    
12.     bottom: 125%; /* 工具提示的位置，距离按钮顶部 125% 的高度，显示在按钮上方 */
    
13.     left: 50%; /* 工具提示的左边缘与父元素的中间对齐 */
    
14.     margin-left: -75px; /* 向左移动工具提示，以实现水平居中对齐，宽度为 150px，所以向左移动一半 */
    
15.     opacity: 0; /* 初始透明度为 0，隐藏工具提示 */
    
16.     transition: opacity 0.3s; /* 添加过渡效果，使透明度变化平滑，持续 0.3 秒 */
    
17. }
    
18. 
    
19. .tooltip1:hover::after {
    
20.     visibility: visible; /* 当鼠标悬停在按钮上时，工具提示变为可见 */
    
21.     opacity: 1; /* 透明度变为 1，使工具提示完全可见 */
    
22. }

复制代码

1. [Spread.Sheets Demo | GrapeCity](https://demo.grapecity.com.cn/SpreadJS/cdn/extendedExample/#/demos/tipCell)

复制代码

1. ToolTip单元格提示框 - 葡萄城市场
   
2. https://marketplace.grapecity.com.cn/ApplicationDetails?productID=SP2301180002&productDetailID=D2311300001&tabName=Tabs_detail

复制代码

1. 页面提示
   
2. https://gcdn.grapecity.com.cn/showtopic-230887-1-1.html
   

复制代码

1. 气泡提示 - 活字格专区 - 求助中心 - 葡萄城开发者社区
   
2. https://gcdn.grapecity.com.cn/showtopic-135373-1-1.html

复制代码

1. 提示设计 - 活字格专区 - 求助中心 - 葡萄城开发者社区
   
2. https://gcdn.grapecity.com.cn/showtopic-224977-1-1.html

复制代码

1. 工具提示最佳实践 | CSS 技巧
   
2. https://css-tricks.com/tooltip-best-practices/

复制代码