气泡提示 纯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 ...
随机推荐
- Sharepoint list webpart
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js&qu ...
- hbase_学习_01_HBase环境搭建(单机)
一.前言 本文承接上一篇:hadoop_学习_02_Hadoop环境搭建(单机) ,主要是搭建HBase的单机环境 二.环境准备 1.说明 hbase 的下载来源有: 官方版本:http://arc ...
- Linux-NoSQL之Redis(一)
1.Redis介绍 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(s ...
- 谈String,StringBuilder,StringBuffer随笔
一.谈谈三者在实现上的区别. (1)先看String 方法,实现了Serializable, Comparable, CharSequence三个接口 package java.lang; imp ...
- Java中日期和时间的相关问题
1.java.lang.System类 System类提供的public static long currentTimeMillis()用来返回当前时间与1970年1月1日0时0分0秒之间以毫秒为单位 ...
- BurpSuite工具应用及重放攻击实验
一.BurpSuite工具介绍 BurpSuite是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程序的过程.所有的工具都共享一个能处理并显示HT ...
- IDEA使用maven中tomcat插件来启动服务器配置
一 .在项目pom文件中配置tomcat 先添加如下配置: <!-- 配置Tomcat插件 --> <build> <plugins> <plugin> ...
- 使用NSURLProtocol和NSURLSession拦截UIWebView的HTTP请求(包括ajax请求)
问题:服务器端有一个网站需要AD认证,整站都开了Basic认证,包括图片,CSS等资源,我在HTTP请求头里面添加认证所需的用户名和密码,传递到服务器端可以认证通过.我在UIWebView的shoul ...
- Erlang generic standard behaviours -- gen_server system msg
这是Erlang generic standard behaviors gen_server 分析的系列的最后一篇,主要分析gen_server module 辅助性的功能函数. 在gen_serve ...
- 对spring、AOP、IOP的理解 (转)
spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦2.可以使用容易提供的众多服务,如事务管理,消息服务等3.容器提供单例模式支持4.容器提供了AOP技术,利用它很容易实现如权 ...