气泡提示 纯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 ...
随机推荐
- Struts2与OGNL
Action会自动放入值栈,成员变量会自动放入root区 如果是方法中的对象 要放入值栈 push()或者getRoot().push(); 界面取值 直接用对象的属性名进行取值
- jmeter--简单使用
1.启动jmeter 2.创建线程组 2.点击线程组,选择添加,选择sampler(采样器),选择http请求 3.在添加的请求页面中,填写服务器名称或IP,端口,路径,请求的方法 4.添加请求的参数 ...
- Git_错误_02_error: src refspec master does not match any
现象:在一个目录下初始化仓库之后,就开始push到github,结果出现了这个错误. 错因:初始化仓库之后,并没有使用git add,git commit 命令将文件添加到git仓库中,所以仓库为空, ...
- leetcode 231 Power of Two(位运算)
Given an integer, write a function to determine if it is a power of two. 题解:一次一次除2来做的话,效率低.所以使用位运算的方 ...
- 1057 Stack (30)(30 分)
Stack is one of the most fundamental data structures, which is based on the principle of Last In Fir ...
- LOJ2303 「NOI2017」蚯蚓排队
「NOI2017」蚯蚓排队 题目描述 蚯蚓幼儿园有$n$只蚯蚓.幼儿园园长神刀手为了管理方便,时常让这些蚯蚓们列队表演. 所有蚯蚓用从$1$到$n$的连续正整数编号.每只蚯蚓的长度可以用一个正整数表示 ...
- 寻找总和为n的连续子数列之算法分析
看到有这么道算法题在博客园讨论,算法eaglet和邀月都已经设计出来了,花了点时间读了下,学到点东西顺便记录下来吧. 题目是从1...n的数列中,找出总和为n的连续子数列. 这里先设好算法中需要用到的 ...
- [转]JS内存泄漏排查方法(Chrome Profiles)
Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个.Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件,该描述文 ...
- vs code 安装Scala
首先本机要安装scala(官网肿么下不了,CSDN上面下的): 配置scala到环境变量PATH中(Scala的根目录): VS中安装以下扩展: 1. Scala: 2. Sbt: 3. Code R ...
- Python脚本开头两行:#!/usr/bin/python和# -*- coding: utf-8 -*-的作用
转于:https://www.crifan.com/python_head_meaning_for_usr_bin_python_coding_utf-8/ 出处:在路上 一.基本功能 1)#!/us ...