教你如何一步一步创建智能和漂亮的ToolTip

让我们开始

第一步: 创建一个HTML文件

1 2 3 4 5

< body > < a href = "#" class = "tooltip" >Tooltip example< span >    < img src = "arrow.gif" class = "arrow" >< strong >Tooltip    </ strong >< br >Created by Anoop</ span ></ a >  </ body >

我们的HTML文档在创建之后看上去像这样

预览: 

第二步: 为HTML创建CSS样式表

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

a.tooltip strong { line-height : 30px ; }     a.tooltip:hover { text-decoration : none ; }    a.tooltip span { z-index : 10 ; display : none ; padding : 14px 20px ; margin-top : 50px ; margin-left : -160px ; width : 240px ; line-height : 16px ; }

我们正在尝试在span里隐藏内容,但当我们鼠标指针在链接上时,我们显示我们的内容

这里我们用:

Z-index:z-index属性指定一个元素的堆叠顺序。

预览:

CSS

1 2 3 4 5 6 7 8

a.tooltip:hover span { display : inline ; position : absolute ; border : 2px solid #fff ; color : #eee ; background-color : black ; }

这里我们用a.tooltip:hover设置字体颜色,背景颜色,边框和鼠标移过时的span位置

预览:

CSS

1 2 3 4 5 6 7 8

.arrow { z-index : 20 ; position : absolute ; border : 0 ; top : -14px ; left : 100px ; }

在这里我们将图像箭头向上稍微向左。

预览: 

CSS

1 2 3 4 5 6 7 8 9 10 11

/* CSS3 for more Stylish Look*/ a.tooltip span { border-radius: 2px ; -webkit-border-radius: 2px ; /*for chrome and safari*/ -ms-border-radius: 2px ; /*for IE*/ -moz-border-radius: 2px ; /*Mozilla*/ -o-border-radius: 2px ; /*Opera*/ box-shadow: 0px 0px 8px 4px #666 ; opacity: 0.8 ; }

最后就是使用CSS3让Tooltip更时尚.

用border-radius设置边框圆角,还有阴影框和透明度

现在这是我们创建的Tooltip的最终样子.

预览