气泡提示 纯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 ...
随机推荐
- php 数字小写转为大写的函数
PHP把阿拉伯数字转换成中文,需要定义一个转换的算法: <?php /将数字转换为汉字,比如1210转换为一千二百一十 $num = "842105580";//九位数 fu ...
- the referenced script on this behaviour is missing!
1.看看你脚本上挂的某个组件是不是发生了变动,比如被删除了什么的 2.最有可能的是你创建完脚本后,中途改过脚本的名字,致使脚本名字和内部的名字不统一.
- Convolutional Neural Networks for Visual Recognition 3
Gradient Computing 前面我们介绍过分类器模型一般包含两大部分,一部分是score function,将输入的原始数据映射到每一类的score,另外一个重要组成部分是loss func ...
- fswebcam 获取图片
/************************************************************************* * fswebcam 获取图片 * 说明: * 通 ...
- uoj problem 14 DZY Loves Graph
题目: DZY开始有 \(n\) 个点,现在他对这 \(n\) 个点进行了 \(m\) 次操作,对于第 \(i\) 个操作(从 \(1\) 开始编号)有可能的三种情况: Add a b: 表示在 \( ...
- bzoj 1441: Min 裴蜀定理
题目: 给出\(n\)个数\((A_1, ... ,A_n)\)现求一组整数序列\((X_1, ... X_n)\)使得\(S=A_1*X_1+ ...+ A_n*X_n > 0\),且\(S\ ...
- Hadoop问题集锦
1.Permission denied: user=root, access=WRITE, inode="/user":hdfs:supergroup 使用Spark进行处理的时候 ...
- centos6.5升级默认的Mysql到5.5方法
0.用lsb_release -a 查看linux系统的版本 1.官网下载bundle或rpm版2.解压 tar -xvf MySQL-xxx.tar或 MySQL-server-xxx.rpm和My ...
- Linux IO实时监控iostat命令详解(转)
简介 iostat主要用于监控系统设备的IO负载情况,iostat首次运行时显示自系统启动开始的各项统计信息,之后运行iostat将显示自上次运行该命令以后的统计信息.用户可以通过指定统计的次数和时间 ...
- sql中in和exist语句的区别?(补充了left join和right join)
in和exists(摘录自百度)in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询. 如果两个表中一个较小,一个是大表,则子查询表大的用exi ...