tooltips
来源:互联网 发布:广州旅游数据 编辑:程序博客网 时间:2024/04/30 06:24
from:http://www.red-team-design.com/css3-tooltips
此效果关键是border属性的利用,transparent值将边框颜色为透明
If your icon or button has insufficient text or none at all, or it just needs some additional explanation, then you surely need a CSS3 tooltip for it. Why’s that? Because, as they have proved till now, they can help you improve your website usability.
Having said that, in this article you’ll learn how to create your own CSS3 tooltips: no images, no javascript.
“Do I really need them?”
The HTML title
attribute is the default additional info you can use. But, the default title
‘s can’t be styled. So, if you want something cool, that you can style it as you wish, then a custom CSS3 tooltip is the solution.
How is made
The method might be familiar to you, a relative
positioned element who wraps an absolute
positioned one. With this article I’m not trying to reinvent the wheel, I’m just showing you how to create some cool CSS3 tooltips.
Below you can see the proper structure, note the two pointers (made using :before
and :after
pseudo-elements ) who overlap:
How the “bordered” pointer is made
Here are the ingredients that were used to create them:
- Gradients
- Box shadow
- Pseudo-elements
HTML
<a href="#" class="tooltip"> your text <span>Your custom description</span></a>
Why an anchor?
Just for compatibility reasons. IE6 has a problem with the :hover
pseudo-class used with other elements than anchor.
If you want to use them, and anchors are not an option for you, then you can use this to trigger the tooltips for IE6:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript"> $(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7) { $('.tooltip').mouseover(function(){ $(this).children('span').show(); }).mouseout(function(){ $(this).children('span').hide(); }) } });</script>
CSS
.tooltip{ position: relative; background: #eaeaea; cursor: help; display: inline-block; text-decoration: none; color: #222; outline: none;}.tooltip span{ visibility: hidden; position: absolute; bottom: 30px; left: 50%; z-index: 999; width: 230px; margin-left: -127px; 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的利用*/
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;}
Browser support
This is a cross-browser solution, it works also on browsers like IE6 and IE7. Although, it looks quite different as we're talking here about progressive enhancement.
- tooltips
- tooltips
- tooltips
- toolbar + tooltips
- 设置Tooltips
- Reskinning ToolTips
- tooltips链接
- 制作tooltips
- tooltips插件
- javascript Tooltips
- ToolTips Notifications
- Creating Custom ToolTips
- 纯CSS Tooltips
- 分享几个Tooltips插件
- CSS3 animated tooltips
- Tooltips控件使用方法
- Flex3工具显示(ToolTips)
- ubuntu tooltips颜色设置
- 核心对象
- 1.3.1
- clock 时间
- 数据库的事务隔离级别
- Android学习笔记之Bitmap位图的旋转
- tooltips
- sql 语句列出数据库中的表的记录数、占用空间大小等
- 网摘——初识C++中的虚函数
- 数据结构-交换类排序
- Poem: A Red, Red Rose
- sony招聘中的一道简单的C程序填空题
- CLRS中的BFS、DFS、ToPoSort
- 使用Win API创建顶级菜单(不使用资源文件)
- sqlserver 数据库各表使用情况