tooltip(气泡提示)

依赖
脚本文件:CalvinTip.js
样式文件:toolTip.css
参数
  • elems
    HTMLNode
    必须

    气泡提示的元素

    options
    Object
    可选

    多选形式的可配置参数。

以下是option参数的说明

参数 数据类型 默认值 说明
content string
null

气泡提示的文本

arrow string n

气泡提示的方向
n s w e

实例

    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(); });

  

效果图:

如使用过程中有问题或者建议加QQ群14804593(入群请注明 博客园或者github) 或者下面回复。

气泡提示 纯CSS的更多相关文章

  1. 纯CSS箭头,气泡

    原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...

  2. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  3. 纯CSS tooltip 提示

    一般的tooltip,使用超链接的title,或者是css+javascript生成. 如果页面布局合理,样式结构清晰,可以使用纯CSS的提示. demo如下: a.tooltip { positio ...

  4. CSS实现自定义手型气泡提示

    实现自定义的手型气泡提示 <html> <head> <meta charset="utf-8"> <title></titl ...

  5. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  6. 纯CSS气泡框实现方法探究

    气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...

  7. 贴心小技能——纯CSS实现的帮助提示

    1. 新技能传授---哒哒哒哒 我们经常会接到这样的小需求,鼠标放在某个位置实现一段小提示. 你还在用js实现这样一个小功能,你就太out了,来看看我们用纯CSS打造的帮助提示. 2. html &l ...

  8. 使用纯 CSS 实现超酷炫的粘性气泡效果

    最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...

  9. Tippy.js - 免费开源且高度可定制的气泡提示独立组件

    推荐一个非常优秀的 web 气泡提示独立UI组件. 介绍 Tippy.js 是一款用于Web的完整工具提示,弹出菜单,下拉菜单和菜单解决方案.适用于鼠标,键盘和触摸输入. 特点 超轻量的纯 javas ...

随机推荐

  1. PHP如何得到数组最后元素的key

    1.array_keys(end($arr)) $array = array( 'one'=>1, 'two'=>2, 'three'=>3, 'four'=>4, ); $a ...

  2. 如何定义一个接口(接口Interface只在COM组件中定义了,MFC和C++都没有接口的概念)

    接口是COM中的关键词,在c++中并没有这个概念.接口是一种极度的抽象.接口用在COM组件中有自己的GUID值,因此定义接口时一定要指定它的GUID值. 实际上接口就是struct,即#define ...

  3. bzoj-1588 1588: [HNOI2002]营业额统计(BST)

    题目链接: 1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 13596  Solved: 5049[Submi ...

  4. codeforces 637B B. Chat Order(map,水题)

    题目链接: B. Chat Order time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  5. 第十七章-异步IO

    异步IO的出现源自于CPU速度与IO速度完全不匹配 一般的可以采用多线程或者多进程的方式来解决IO等待的问题 同样异步IO也可以解决同步IO所带来的问题 常见的异步IO的实现方式是使用一个消息循环, ...

  6. Mule ESB学习【转-结合了网络上的一些资源】

    1.SOA标准之一:SCA架构思想 SOA在Java领域有两套标准:一个是SUN推出的JBI(没有得到BEA和IBM的承认),另外一个是:IBM和BEA等公司推出的SCA和SDO标准. JBI之关注J ...

  7. 每天一个linux命令(13):more命令

    版权声明更新:2017-05-17博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下面的mv命令. 2. ...

  8. MYSQL root密码修改找回命令

    方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass ...

  9. bzoj 4031: 小Z的房间 矩阵树定理

    bzoj 4031: 小Z的房间 矩阵树定理 题目: 你突然有了一个大房子,房子里面有一些房间.事实上,你的房子可以看做是一个包含n*m个格子的格状矩形,每个格子是一个房间或者是一个柱子.在一开始的时 ...

  10. Unity中的ShaderToys——将大神们写的shader搬到unity中来吧

    http://lib.csdn.net/article/unity3d/38699 这篇文章翻译自国外的一篇文章(这里是原文链接),正在使用unity的你是否在shader toy上发现很多牛逼哄哄的 ...