tooltip.css

纯CSS鼠标提示工具。

v. 2.0.0

更新日期:2018.4.12

预览DEMO

 安装:

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

如:

<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 属性存放的是显示所需的文本。

如:

<p data-tooltip="left" data-tooltip-text="左边提示">左边提示</p>    

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

如:

<p data-tooltip="right" data-tooltip-text="右边提示样式 &#010 这个是右边提示样式哦 &#010 css3提示样式">右边提示</p>

兼容性:
1)IE9、IE9+

2)Firefox

3)Chrome

4)360 Browser

5)Sogou Explorer

tooltip.css-2.0文档的更多相关文章

  1. Beautiful Soup 4.2.0 文档

    Beautiful Soup 4.2.0 文档 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方 ...

  2. css2.0文档查阅及字体样式

    css2.0文档查阅下载     网址:http://soft.hao123.com/soft/appid/9517.html <html xmlns="http://www.w3.o ...

  3. vue mand-mobile按2.0文档默认安装的是1.6.8版本

    vue mand-mobile按2.0文档默认安装的是1.6.8版本 npm list mand-mobilebigbullmobile@1.0.0 E:\webcode\bigbullmobile` ...

  4. Jquery选择器大全、属性操作、css操作、文档、事件等

    一.简介   定义  jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象  jQuery产 ...

  5. js/css在html文档中的引用外部文件方式对比

    包含css样式表和js脚本的最好方式是使用外部文件,因为css/js和html标记文档可以清晰地分离. css的外部引用写在<head></head>中: <head&g ...

  6. html/css 关于脱离文档流的几种情况

    所谓的文档流 顾名思义就是按照顺序流下来,指的是html元素从上往下 从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一 ...

  7. Django2.0文档

    第四章 模板 1.标签 (1)if/else {% if %} 标签检查(evaluate)一个变量,如果这个变量为真(即,变量存在,非空,不是布尔值假),系统会显示在 {% if %} 和 {% e ...

  8. 11.Django2.0文档

    第四章 模板 1.标签 (1)if/else {% if %} 标签检查(evaluate)一个变量,如果这个变量为真(即,变量存在,非空,不是布尔值假),系统会显示在 {% if %} 和 {% e ...

  9. css布局与文档流的关系之float(浮动)

    所谓文档流,指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列.脱离文档流呢,就是元素打乱了这个排列,或是从排版中拿走. 说到文档流呢,我们先来说一下元素,每个元素呢,都有display ...

随机推荐

  1. JavaScript判断类型

    1.typeof操作符,返回值为字符串,用来判断一个值是哪种基本类型 "undefined"-Undefined "boolean"-Boolean " ...

  2. 20155306 2017-2018-1《信息安全系统设计》第二周课堂测试以及myod的实现

    20155306 2017-2018-1<信息安全系统设计>第二周课堂测试以及myod的实现 第二周课堂测验: (注:前两项在课堂已提交,在此不做详解) 第一项: 每个.c一个文件,每个. ...

  3. alpha-咸鱼冲刺day2-紫仪

    总汇链接 一,合照 emmmmm.自然是没有的. 二,项目燃尽图 三,项目进展 今天并没有什么进展,弄了好久好像也只研究出怎么把JS的功能块插入进去.html的信息提交这些还不知道要怎么弄. 四,问题 ...

  4. Alpha冲刺No.1

    冲刺Day1 一.站立式会议计划 全体成员先安装好Android Studio,mysql,以及navicat for MySQL 将上述软件调试至可运行状态 自主把玩安卓虚拟机,mysql 通过一些 ...

  5. 201621123062《java程序设计》第二周学习总结

    1.本周学习总结 本周学习重点: 1.java的基本数据类型(类似于C,特有boolean),java的引用类型(类似指针),其他常用类. 2.字符串类型String(比c简单),String的不变性 ...

  6. Python strip()方法

    描述 Python strip() 方法用于移除字符串头尾指定的字符(默认为空格). 语法 strip()方法语法: str.strip([chars]); 参数 chars -- 移除字符串头尾指定 ...

  7. 服务器磁盘阵列数据恢复,raid5两块硬盘掉线数据恢复方法

    [用户单位信息] 农业科学研究院某研究所 [磁盘阵列故障发生过程描述]客户的DELL MD1000服务器内置15块1TB硬盘搭建为RAID5磁盘阵列阵列,服务器在正常工作中有一块硬盘离线,管理员对磁盘 ...

  8. JAVA_SE基础——3.Java程序的开发流程

    上一篇,写的是JAVA的环境变量的配置,今天我抽空写篇Java程序的开发流程,下面的教程是我结合书本和毕向东老师的视频写下的心的~ 在没有真正写Java程序前,首先需要了解Java程序的开发过程. S ...

  9. wamp的mysql设置用户名和密码

    wamp下修改mysql root用户的登录密码 感谢作者:http://www.3lian.com/edu/2014/02-25/131010.html               1.安装好wam ...

  10. copy代码(含static对象)留下的致命错误

    本来以为这个bug快改不好了,然而发现了问题所在 copy代码没有完全改掉对象名称,导致对象重复创建了,由于是static所以debug过程中 注释了addProperty(gridRowDetail ...