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

标签: HTML JavaScript CSS
发布时间: 2013/7/3 11:45:18

让我们开始

第一步: 创建一个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的最终样子.

预览


赞助商