教你如何一步一步创建智能和漂亮的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的最终样子.
预览