HTML5跨浏览器纯CSS工具提示特效-爱编程

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

来源：htmleaf 阅读：14 时间：2018-02-03 03:20

Pure-CSS-Tooltips是一款跨浏览器HTML5纯CSS工具提示特效。该工具提示特效使用HTML5 data属性和伪元素来将一个元素转换为tooltip，不需要额外的HTML标签和js代码。

使用方法

HTML结构

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

<span data-tooltip="I’m a tooltip">tooltip</span>

基本的tooltip效果

主题样式

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

<span data-tooltip-theme="blue" data-tooltip="I’m a blue tooltip">tooltip</span>
<span data-tooltip-theme="green" data-tooltip="I’m a blue tooltip">tooltip</span>
<span data-tooltip-theme="orange" data-tooltip="I’m a blue tooltip">tooltip</span>
<span data-tooltip-theme="red" data-tooltip="I’m a blue tooltip">tooltip</span>

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

<body data-tooltip-theme="blue">

字体和对齐

在data-tooltip-theme属性中使用rtl或ltr属性可以是文本右对齐或左对齐。例如：

<span data-tooltip-theme="orange mono lft" data-tooltip="......">tooltip</span>

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

替换元素

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

<span class="tooltip-wrapper" data-tooltip="A placeholder image generated by placehold.it">
  <img src="http://placehold.it/350x150" />
</span>

tooltip效果

对于表单和其它元素也可以使用相同的方法。

Pure-CSS-Tooltips工具提示的github地址为：https://github.com/freqdec/Pure-CSS-Tooltips

在线预览源码下载