制作一个漂亮的提示框

        曾经在一个项目中要求制作一个漂亮的弹出窗口，一个小箭头指向所解释的对象。今天也尝试作了一个，给有兴趣的同志们参考共同学习。

        首先做一个简单的提示窗口。编写HTML代码，把所有的提示窗口内容放在一个span对象中。

鼠标放到 < a  href ="#"  class ="tip" > CSS < span  class ="popbox" > 这里放一张图片Cascading Style Sheets 层叠样式表 </ span ></ a >
 这个超链接上，可以看到一个提示框 

然后对其中的内容用CSS进行显示处理。

a.tip {
    color : red ;
    text-decoration : none ;
    position : relative ;
}
a.tip .popbox {
    display : none ;
}
a.tip:hover {
     cursor : pointer ; /* 由于IE对hover伪对象支持不完善，设置了cursor:pointer才能正常显示 */
}
a.tip:hover .popbox {
    display : block ;
    position : absolute ;
    top : 15px ;
    left : -30px ;
}

要将提示窗口放在所解释的内容边上，必须将tip设置成相对定位:position:relative;然后把span对象设置成绝对定位，position:absolute;.
一般状态下使用display:none;进行隐藏。由于IE对hover支持不够完善，必须在a:tip:hover中指定cursor:pointer。
（网站布局实录-李超 中写的是cursor:hand，确实能够正常显示，当时dreamweaver8中却没有这个属性）

a.tip:hover .popbox {
    display : block ;
    position : absolute ;
                     top : 15px ;
                     left : -30px ;
}

通过以上设置，让鼠标放在超链接上的时候显示。

接下来制作一个复杂带背景并且放了一个图片的。

要显示不规则的图形，首先要制作一个不规则的符合要求的图形作为背景，如果是带箭头的，就需要将没有图形的部分制作成透明背景（photoshop处理就好了）。

改写以下CSS代码：

a.tip:hover .popbox {
    display : block ;
    position : absolute ;
    top : -240px ;
    left : -30px ;
    width : 226px ;
    height : 242px ;
    color : #000000 ;
    background-image : url('背景图片.gif') ;
    background-repeat : no-repeat ;
}

注意，在Dreamweaver8中插入图片的时候url('背景图片.gif')没有单引号，这在Firefox中不能够正常显示。
另外设置其重复方式为no-repeat，相对的位置根据具体要求进行设置。

修改span中的内容，添加图片的信息。

鼠标放到 < a  href ="#"  class ="tip" > CSS < span  class ="popbox" > 这里放一张图片 < img  src ="草原.jpg"  width ="60px"  height ="60px"  border ="0px" />< br /> Cascading Style Sheets 层叠样式表 </ span ></ a >
  这个超链接上，可以看到一个提示框 

设置图片的border，使得FireFox与IE中的显示是相同的。

最后的效果图与代码请查看

http://www.mxstdio.cn/example/poptip/index.html