前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >tooltip.css-2.0文档

tooltip.css-2.0文档

作者头像
用户6167509
发布2019-09-04 10:25:00
7440
发布2019-09-04 10:25:00
举报
文章被收录于专栏:一路向前端一路向前端

 tooltip.css

纯CSS鼠标提示工具。

v. 2.0.0

更新日期:2018.4.12

预览DEMO

 安装:

只需在页面中引入"tooltip.css"或“tooltip.min.css”文件即可。

如:

代码语言:javascript
复制
<link rel="stylesheet" href="css/tooltip.css" />

<--or(或)-->

<link rel="stylesheet" href="css/tooltip.min.css" />

 使用:

1、在需要显示提示的标签上添加 data-tooltip 属性和 data-tooltip-text 两个属性;

2、data-tooltip 属性值代表方向,可以设置为“left”、“right”、“top”、“bottom”、“top-left”、“top-right”、“bottom-left”和“bottom-right”中的任意一个值;

3、data-tooltip-text 属性存放的是显示所需的文本。

如:

代码语言:javascript
复制
<p data-tooltip="left" data-tooltip-text="左边提示">左边提示</p>    

文本换行:在要换行的地方添加**&#010**字符

如:

代码语言:javascript
复制
<p data-tooltip="right" data-tooltip-text="右边提示样式 &#010 这个是右边提示样式哦 &#010 css3提示样式">右边提示</p>

兼容性: 1)IE9、IE9+

2)Firefox

3)Chrome

4)360 Browser

5)Sogou Explorer

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-04-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档