tomhat
- 浏览: 510086 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (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 2812var ie; var firefox; ... -
JavaScript从数组中删除指定值元素的方法
2016-10-11 13:13 754下面的代码使用了两种方式删除数组的元素，第一种定义一个单独的函 ... -
CSS几种特效整理
2016-04-19 09:55 539css用伪类before和after制作三角形箭头网上有一堆教 ... -
js 一些知识,js获取contxtPath
2015-11-12 13:49 1210var num = 1; var str = '1'; ... -
IE指定文档模式
2015-10-15 15:21 1027对于 Web 开发人员来说，文本兼容性是一个要考虑的重要问题。 ... -
JSP和JSTL获取服务器参数
2015-09-11 13:57 1200<%@ page language="java ... -
CSS 中文字体的英文名称
2015-08-26 09:52 558华文细黑：STHeiti Light [STXihei] 华 ... -
如何在一个页面上让多个jQuery版本共存
2014-09-10 10:22 919如何在一个页面上让多个jQuery共存呢？比如jquery-1 ... -
javascript Date Format
2014-07-07 23:14 921// 对Date的扩展，将 Date 转化为指定格式的Stri ... -
CSS控制文字只显示一行，超出部分显示省略号
2014-07-04 17:40 4675<style type="text/css&q ... -
jQuery仿腾讯云滑动下拉导航菜单效果代码
2014-07-03 17:13 2952<!DOCTYPE html> <html& ... -
javascript按回车直接提交表单
2014-06-19 12:29 859<script> document.onkeydo ... -
css + javascript 制作tips
2014-06-06 15:43 984<!DOCTYPE html> <html& ... -
javascript获取兄弟节点的两种方法
2014-06-06 13:09 14592方案一：先通过父元素的子元素找到含自己在内的“兄弟元素”，然后 ... -
js判断浏览器
2013-10-31 15:33 1031// 判断浏览器 function getExplorer() ... -
jQuery获取Select选择的Text和 Value
2013-09-24 17:49 1166jQuery获取Select选择的Tex ... -
jquery中修改input标签中type属性
2013-07-09 14:50 8033<style> .input_Login { w ... -
jqGrid 各种参数 详解
2013-06-06 14:54 111948JQGrid是一个在jquery基础上做的一个表格控件，以 ... -
jqGrid 各种参数 详解
2013-06-06 14:51 219JQGrid是一个在jquery基础上做的一个表格控件，以a ... -
javascript IE与火狐下window.event对象的区别
2013-05-23 13:09 988[javascript] IE与火狐下window.event ...
相关推荐
html5tooltipsjs是一款使用纯javacript编写的轻量级tooltips工具提示插件。该tooltips插件不依赖任何框架，内容可带HTML标签，并可以使用预设的CSS3动画来制作tooltips动画效果。
jQuery Zebra.Tooltips是一款高效且易于使用的工具提示插件，它以其轻量级、高度可配置的特性深受开发者喜爱。该插件旨在为用户提供一个简单而聪明的方式来展示与页面元素相关的提示信息。 ### 插件特点 1. **轻量...
Bootstrap 提示框定时消失是网页动态效果的一种常见应用...Toastr 是一个轻量级的 jQuery 插件，专为创建具有多种样式和行为的提示框而设计。要使用 Toastr，你需要在页面中引入 Toastr 的 CSS 和 JS 文件： ```html ...
JavaScript提示框插件是一种常用的网页交互元素，它能够在鼠标悬停在特定元素上时，以弹出的小窗口显示额外的信息。这种插件通常被称为“tooltips”，它可以帮助用户了解页面上某些元素的具体含义或详细内容，而无需...
jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。通过使用jQuery，开发者可以更高效地编写跨浏览器的JavaScript代码，无需关心不同浏览器之间的兼容性问题。 ...
JavaScript，简称JS，是一种轻量级的解释型编程语言，广泛用于网页和网络应用的开发。它允许我们动态地更新HTML、CSS和DOM（文档对象模型），为网页增添交互性。在创建浮动提示框时，JS主要负责处理用户事件、计算...
jBox是一个轻量级的插件，旨在提供灵活、可定制化的弹窗解决方案。它的设计目标是使开发者能够快速创建具有tooltips、模态对话框、图片画廊等功能的提示框。jBox支持多种触发方式和自定义样式，同时兼容各种浏览器...
因此，他决定编写一个轻量级的自定义插件，以满足显示基本提示信息的需求。这个插件的设计目标是鼠标移到文字上方时，自动弹出一个提示框显示相关信息。 ### 实现效果 该插件的实现效果相当直观：当用户将鼠标悬停...
Vue.js 是一个流行的轻量级前端框架，专为构建用户界面而设计，尤其适用于单页面应用（SPA）。在Vue.js 2.x版本中，开发者可以利用各种组件来增强应用程序的功能和用户体验。Vuejspopover 是一个针对Vue.js 2的库，...
如果你只需要特定的组件，可以通过“编译并定制”Bootstrap，只选择你需要的CSS和JS插件，生成一个更轻量级的定制版本。这样可以减少不必要的加载时间，提高页面性能。 另外，Bootstrap还提供了一套丰富的组件，如...
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、轻量级和高效著称。在Vue2.x版本中，开发者可以创建各种自定义组件来满足项目需求，其中包括用于显示提示信息的tooltip组件。"一个Vue2x的tooltip提示信息...
- jQuery Tooltipster是一个轻量级、高度可定制的jQuery插件，它允许开发者创建各种样式和动画效果的工具提示。 - 插件支持多种主题和样式，可以通过CSS轻松定制，以适应不同的网页设计风格。 - Tooltipster提供...
最后，消息插件（Message Plugin）通常指的是Bootstrap的提示信息，如Tooltips（提示工具）和Popovers（弹出框）。这些轻量级的组件可以在鼠标悬停或点击时显示额外信息，增强用户交互体验。Bootstrap的消息插件可以...
接下来，提示框（Tooltips）是一种展示提示信息的轻量级UI元素，当用户将鼠标悬停、聚焦或触摸某个元素时，提示框会显示出来。Bootstrap的Tooltips组件可以通过引入JavaScript文件来使用，并且需要数据属性和...
Simple Tooltips是一个轻量级且实用的jQuery插件，专门用于创建这种效果。它允许开发者轻松地添加和定制提示内容，支持各种自定义选项，例如提示的方向（上方、下方、左侧、右侧）、颜色、延迟时间等。通过使用这个...
工具提示和弹出框则提供了轻量级的信息提示功能，可以在鼠标悬停时显示额外信息。 为了实现响应式设计，Bootstrap3使用了一套基于LESS的CSS预处理器，这使得样式更加可维护和扩展。同时，框架提供了JavaScript插件...
尽管泡泡糖本身可能是一个轻量级的框架，但它可能兼容流行的CSS预处理器，如Sass或Less。预处理器允许开发者使用变量、嵌套规则和混合功能等特性编写更模块化、可维护的CSS代码。 ### 定制与扩展 作为一个简约框架...
BBCode是一种轻量级的标记语言，类似于HTML，但设计用于论坛和在线社区。Wowhead Tooltips的BBCode解析器能够识别特定的 Wowhead 格式代码，并将其转换为富含游戏信息的动态提示，比如物品属性、技能详情、任务描述...
jQuery 3 是一个轻量级、高性能的库，简化了DOM操作。例如，使用jQuery选择元素、添加事件监听器和触发动画变得更加简单： ```javascript // 选择页面上的所有段落 var paragraphs = $("p"); // 添加点击事件监听...