使用CSS3自己制作神奇的Tooltip提示效果 A Tutorial Customize Your Anchor Link Tooltips

如何制作Tooltips

使用CSS3你也可以制作神奇的Tooltips效果

什么是tooltip?

Tooltips也被称为屏幕提示,它是当鼠标悬停在一个图标、图片、超链接或其它元素上面的时候出现的一串提示信息。

你可以将Tooltip信息显示在元素的上面This is a top position tooltip!左面This is a left position tooltip!右面This is a right position tooltip!下面This is a bottom position tooltip!

你也可以自定义Tooltip的颜色为绿色This is a fantastic green tooltip!红色This is a bloody red tooltip!,或者蓝色This is an amazing blue tooltip!

当然你也可以为Tooltip制作一些很酷的动画效果,例如 淡入淡出效果 Plain Fading effect animation!滑动显示效果Wonderful sliding effects! Nice!

Tooltip不仅仅限于只能显示文字,你可以在tooltip中放置一些图片

你知道吗?tooltips起源于一些很老的Microsoft项目,例如Microsoft Word。这些项目中使用的工具栏在鼠标移动到它们上面的时候就会出现一些提示信息。

现在,我们可以通过CSS3来轻松的制作各种神奇的tooltip效果!