气泡提示 纯CSS
tooltip(气泡提示)
- 依赖
- 脚本文件:CalvinTip.js
- 样式文件:toolTip.css
参数
- elems
- HTMLNode
必须气泡提示的元素
- options
- Object
可选多选形式的可配置参数。
以下是option参数的说明
| 参数 | 数据类型 | 默认值 | 说明 |
|---|---|---|---|
| content | string |
null
|
气泡提示的文本 |
| arrow | string | n |
气泡提示的方向 |
实例
var tt = new calvin.ui.tooltip(document.getElementById("me"), { content: "提示文本!", arrow: "n" });
var tt2 = new calvin.ui.tooltip(document.getElementById("Text1"), { content: "提示文本!", arrow: "w" });
var tt2 = new calvin.ui.tooltip(document.getElementById("Text2"), { content: "提示文本!", arrow: "s" });
$("#btnClose").click(function () { tt2.hide(); });
$("#btnOpen").click(function () { tt2.show(); });
效果图:

气泡提示 纯CSS的更多相关文章
- 纯CSS箭头,气泡
原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 纯CSS tooltip 提示
一般的tooltip,使用超链接的title,或者是css+javascript生成. 如果页面布局合理,样式结构清晰,可以使用纯CSS的提示. demo如下: a.tooltip { positio ...
- CSS实现自定义手型气泡提示
实现自定义的手型气泡提示 <html> <head> <meta charset="utf-8"> <title></titl ...
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 纯CSS气泡框实现方法探究
气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...
- 贴心小技能——纯CSS实现的帮助提示
1. 新技能传授---哒哒哒哒 我们经常会接到这样的小需求,鼠标放在某个位置实现一段小提示. 你还在用js实现这样一个小功能,你就太out了,来看看我们用纯CSS打造的帮助提示. 2. html &l ...
- 使用纯 CSS 实现超酷炫的粘性气泡效果
最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...
- Tippy.js - 免费开源且高度可定制的气泡提示独立组件
推荐一个非常优秀的 web 气泡提示独立UI组件. 介绍 Tippy.js 是一款用于Web的完整工具提示,弹出菜单,下拉菜单和菜单解决方案.适用于鼠标,键盘和触摸输入. 特点 超轻量的纯 javas ...
随机推荐
- hadoop_异常_01_ Unable to determine address of the host-falling back to "localhost" address java.net.UnknownHostException: rayner
一.异常现象 安装好hadoop之后,执行格式化namenode命令时,抛出以下异常: // :: WARN net.DNS: Unable to determine local hostname - ...
- 第二章 python基础(二)
第九节 函数 函数就是完成特定功能的一个语句组,这组语句可以作为一个单位使用,并且给它取一个名字. 可以通过函数名在程序的不同地方多次执行(这通常叫做函数调用),却不需要在所有地方都重复编写这些语句. ...
- linux命令学习笔记(41):ps命令
Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前 那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程 ...
- OpenCV——饱和度调整
参考: 闲人阿发伯的博客 // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED ...
- C++之this指针与另一种“多态”
一.引入 定义一个类的对象,首先系统已经给这个对象分配了空间,然后会调用构造函数(说明:假设存在构造函数--2010.9.5修正). 一个类有多个对象,当程序中调用对象的某个函数时,有可能要访问到这个 ...
- Gym - 100570E:Palindrome Query (hash+BIT+二分维护回文串长度)
题意:给定字符串char[],以及Q个操作,操作有三种: 1:pos,chr:把pos位置的字符改为chr 2:pos:问以pos为中心的回文串长度为多长. 3:pos:问以pos,pos+1为中心的 ...
- 用VBA计算两个日期之间的工作日(去掉周末两天)
最近公司HR和Finance想算员工的工作天数,想让我帮忙写些VBA,自己从网上找了下代码,自己再改改,以下来自网络. 计算两个日期之间的工作日,用VBA,因量大,最好用数组做 Sub kk() Di ...
- ORACLE数据库增加表空间大小或给表空间增加数据文件
转载 2017年11月24日 11:00:28 ----查询表空间使用情况--- SELECT UPPER(F.TABLESPACE_NAME) "表空间名", D.TOT_GRO ...
- 人物-IT-柳传志:柳传志
ylbtech-人物-IT-柳传志:柳传志 柳传志,英文名:Chuanzhi Liu,男,汉族,中共党员,1944年4月出生于江苏镇江,联想控股股份有限公司董事长,联想集团创始人. 企业家.投资家.全 ...
- HTTP 的若干问题
1 HTTP无状态协议和Connection:Keep-Alive容易犯的误区 HTTP无状态:无状态是指协议对于事务处理没有记忆能力,服务器不知道客户端是什么状态.从另一方面讲,打开一个服务器上的 ...