当前位置：首页 > 网页特效 > 其他

HTML5跨浏览器纯CSS工具提示特效

分类：其他日期：2024-05-14 点击(0) 评论(0)

HTML5跨浏览器纯CSS工具提示特效

简介

##### HTML结构
一个最基本的工具提示的HTML结构如下：

```html
tooltip
```
##### 主题样式
该tooltip特效内置了4种颜色主题：红色、蓝色、绿色和橙色。

```html
tooltip
tooltip
tooltip
tooltip
```
如果你想页面中所有的tooltip都是用统一的主题，可以在body元素中添加data-tooltip-theme="blue"等主题data属性。

```html
<body data-tooltip-theme="blue"> 
``` 
##### 字体和对齐
在data-tooltip-theme属性中使用rtl或ltr属性可以是文本右对齐或左对齐。例如：

```html
tooltip 
``` 
上面的mono代表字体使用monospace字体族。

#####  替换元素
如果你需要为图片、表单元素等制作tooltip效果，可以在这些元素外包裹一层元素。例如：

```html

 <img src="http://placehold.it/350x150" />
 
```