tomhat
- 浏览: 502061 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (156)
- xml (4)
- web前端 (24)
- jQuery (18)
- java (38)
- SQL (9)
- perl (2)
- OTRS (1)
- GWT (4)
- Linux (32)
- Maven (2)
- Spring (2)
- Oracle Win7 (1)
- css (8)
- eclipse (3)
- mysql (11)
- tomcat (5)
- git (4)
- javascript (22)
- font (1)
- android (1)
- log4j (1)
- email (1)
- sublime plugin (1)
- html (2)
- matches (1)
- php (3)
- apache (3)
- gd (1)
- docker (5)
- rails (1)
- RabbitMQ (1)
- Ubuntu (3)
- L2TP VPN (1)
- nodejs (1)
- oraclejet (1)
- ubutun (1)
- ntp (1)
- ngix (1)
- ssl (1)
- https (1)
- Linux，Debian (2)
- dpkg (1)
- pac (1)
- vi (1)
- vim (1)
- java，http (0)
- httpClient (0)
- shutter (1)
- shell (1)
- redmine (1)
最新评论
-
纵观全局：
配置之后，连接显示不是私密连接
keytool生成证书与Tomcat SSL配置 -
zhuchao_ko：
可以 伪造
java获得ip地址 -
longhua2003：
代码太乱了
java下载文件 -
tomhat：
ccx410 写道 安装gwt报错，unable to ret ...
GWT CellTable -
ccx410：
安装gwt报错，unable to retrieve osgi ...
GWT CellTable
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Html</title>
<style type="text/css">
.tooltip {
position: relative;
/* background: #eaeaea; */
cursor: default;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
top:100px;
left:200px;
}
.tooltip span {
visibility: hidden;
position: absolute;
bottom: 30px;
left: 45%;
z-index: 999;
width: 100%;
margin-left: -55%;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover {
border: 0; /* IE6 fix */
}
.tooltip:hover span {
visibility: visible;
}
.tooltip span:before,.tooltip span:after {
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before {
border-top-color: #ccc;
bottom: -8px;
}
.tooltip span:after {
border-top-color: #ccc;
bottom: -8px;
}
</style>
</head>
<body>
<div class="tooltip">这是我的文字<span>这是我的说明描述文字。</span></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Html</title>
<style type="text/css">
.tooltip {
position: relative;
/* background: #eaeaea; */
cursor: default;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
top:100px;
left:200px;
}
.tooltip span {
visibility: hidden;
position: absolute;
bottom: 30px;
left: 45%;
z-index: 999;
width: 100%;
margin-left: -55%;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover {
border: 0; /* IE6 fix */
}
.tooltip:hover span {
visibility: visible;
}
.tooltip span:before,.tooltip span:after {
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before {
border-top-color: #ccc;
bottom: -8px;
}
.tooltip span:after {
border-top-color: #ccc;
bottom: -8px;
}
</style>
</head>
<body>
<div class="tooltip">这是我的文字<span>这是我的说明描述文字。</span></div>
</body>
</html>
分享到：
发表评论
-
javascript 监听键盘事件
2017-04-14 10:38 2761var ie; var firefox; ... -
JavaScript从数组中删除指定值元素的方法
2016-10-11 13:13 721下面的代码使用了两种方式删除数组的元素，第一种定义一个单独的函 ... -
CSS几种特效整理
2016-04-19 09:55 500css用伪类before和after制作三角形箭头网上有一堆教 ... -
js 一些知识,js获取contxtPath
2015-11-12 13:49 1162var num = 1; var str = '1'; ... -
IE指定文档模式
2015-10-15 15:21 925对于 Web 开发人员来说，文本兼容性是一个要考虑的重要问题。 ... -
JSP和JSTL获取服务器参数
2015-09-11 13:57 1161<%@ page language="java ... -
CSS 中文字体的英文名称
2015-08-26 09:52 515华文细黑：STHeiti Light [STXihei] 华 ... -
如何在一个页面上让多个jQuery版本共存
2014-09-10 10:22 873如何在一个页面上让多个jQuery共存呢？比如jquery-1 ... -
javascript Date Format
2014-07-07 23:14 869// 对Date的扩展，将 Date 转化为指定格式的Stri ... -
CSS控制文字只显示一行，超出部分显示省略号
2014-07-04 17:40 4617<style type="text/css&q ... -
jQuery仿腾讯云滑动下拉导航菜单效果代码
2014-07-03 17:13 2908<!DOCTYPE html> <html& ... -
javascript按回车直接提交表单
2014-06-19 12:29 817<script> document.onkeydo ... -
css + javascript 制作tips
2014-06-06 15:43 947<!DOCTYPE html> <html& ... -
javascript获取兄弟节点的两种方法
2014-06-06 13:09 14529方案一：先通过父元素的子元素找到含自己在内的“兄弟元素”，然后 ... -
js判断浏览器
2013-10-31 15:33 951// 判断浏览器 function getExplorer() ... -
jQuery获取Select选择的Text和 Value
2013-09-24 17:49 1131jQuery获取Select选择的Tex ... -
jquery中修改input标签中type属性
2013-07-09 14:50 7985<style> .input_Login { w ... -
jqGrid 各种参数 详解
2013-06-06 14:54 111857JQGrid是一个在jquery基础上做的一个表格控件，以 ... -
jqGrid 各种参数 详解
2013-06-06 14:51 219JQGrid是一个在jquery基础上做的一个表格控件，以a ... -
javascript IE与火狐下window.event对象的区别
2013-05-23 13:09 935[javascript] IE与火狐下window.event ...
相关推荐
这是一款使用css3 transitions和伪元素制作的效果非常神奇的tooltips提示框动画效果。各种tooltips有气泡放大效果、旋转效果和滑动效果等等。
css3 tooltips鼠标悬停显示消息提示框样式。完整的代码，方便学习。
html5tooltipsjs是一款使用纯javacript编写的轻量级tooltips工具提示插件。该tooltips插件不依赖任何框架，内容可带HTML标签，并可以使用预设的CSS3动画来制作tooltips动画效果。
Social Icons by Emir Ayouni http: www growcase com 2011 11 friday freebie the social gunman icons concept Friday Freebie: The Social Gunman Icons & Concept Background by ...
有点微信风格的CSS3信息提示特效 tooltips代码，或者说是用户通知提示框，基于Vue.js实现，整体外框美化成了圆角风格，视觉效果很“微信”。好像现在很多PC端的风格也开始走简洁路线，都挺简洁，之前也模拟过这种...
tootik是一款纯CSS Tooltips工具提示特效库。该工具提示效果使用CSS3/SASS来制作，支持使用data属性来配置tooltips的位置和属性，效果非常炫酷。
该tooltips通过简单的设置可以实现在不同位置显示提示框，根据内容的多少来自动设置提示框的大小，它还可以显示unicode编码和Font Awesome字体图标等。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera...
balloon.css是一款实用纯CSS3制作的简单实用的tooltips工具提示...该tooltips通过简单的设置可以实现在不同位置显示提示框，根据内容的多少来自动设置提示框的大小，它还可以显示unicode编码和Font Awesome字体图标等。
实现效果： jQuery Tooltips悬停文字提示框效果，基于jQuery插件，可自定义显示位置，很不错的信息提示插件特效
asp.net(tooltips提示框)
一款tooltips效果的导航菜单特效。它的最大特点是tooltips导航菜单将出现在剩余空间大的地方，上方和下方哪里空间大就出现在哪里。
tailwindcss-工具提示Tailwind CSS的非常简单CSS唯一工具提示。 请参阅的演示赞助如果您要构建管理仪表板或内部工具，请检查 （使用Tailwind构建！）编辑您的Tailwind.css文件： 在您的Tailwind.css文件上添加...
bootstrap工具提示压缩版css样式文件（tooltips.css）
balloon.css是一款实用纯CSS3制作的简单实用的tooltips工具提示...该tooltips通过简单的设置可以实现在不同位置显示提示框，根据内容的多少来自动设置提示框的大小，它还可以显示unicode编码和Font Awesome字体图标等。
这是一款使用jQuery和css3制作的滑动显示tooltips工具提示特效。该tooltips工具提示特效以滑动展开的方式显示特定链接的详细信息，整个动画过渡自然，效果非常酷。
jQuery Tooltips悬停文字提示框效果，基于jQuery插件，可自定义显示位置，很不错的信息提示插件特效。
事实上各式Tooltips方法非常多，不过大部分都是用Javascript实现，但是使用CSS，可以更简单，更有效率。最重要的是符合标准。 我们对类加入position:relative属性，使得span标签的位置能够紧跟在链接后面。
Zebra_Tooltips是一个轻量级（最小约5KB）的jQuery插件，用于创建简单但智能且在视觉上引人入胜的工具提示，具有良好的过渡效果并提供了广泛的配置选项。 也可以使用API显示和隐藏工具提示。 当以编程方式显示时...
很酷的jquery,提示框, tooltips, 效果很多, 部分使用了比较复杂的动画, 需要加载jquery swing 库. 虽然文件大了点, 不过效果确实没得说.