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

当前位置:主页 > CSS3库 > UI界面设计 > HTML5跨浏览器纯CSS工具提示特效
 HTML5跨浏览器纯CSS工具提示特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-08-09
    阅读:
麦子学院
简要教程

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属性中使用rtlltr属性可以是文本右对齐或左对齐。例如:

<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

网友评论