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

让我们开始

第一步: 创建一个HTML文件

< 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样式表

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

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

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

预览:

CSS

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

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

预览: 

CSS

/* 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的最终样子.

预览