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. IE11,Chrome65.0.3325.146,Firefox58的webdriver驱动下载,并用selenium驱动来实现自动化测试

    各浏览器版本:    python版本: selenium版本: IE11的Webdriver下载: http://dl.pconline.com.cn/download/771640-1.html ...

  2. 光环国际联合阿里云推出“AI智客计划”

    2018阿里巴巴云栖大会深圳峰会3月28日.29日在大中华喜来登酒店举行,阿里云全面展示智能城市.智能汽车.智能生活.智能制造等产业创新. 3月28日下午,以"深化产教融合,科技赋能育人才& ...

  3. Struct_2路径问题

    今天在自学那个Struct2的知识点的时候,发现那个相对路径和绝对路径有点遗忘.特地去看了视频还有在百度上查了一些资料.我觉得这个路径问题对于我这个初学者来说还是有点容易遗忘的.所以,今天就添加这个新 ...

  4. 根据IO流源码深入理解装饰设计模式使用

    一:摘要 通过对java的IO类中我们可以得出:IO源码中使用装饰设计模式频率非常高, 对装饰设计模式而言,他能够避免继承体系的臃肿,同时也可以动态的给一个对象添加一些额外的功能,如果要扩展一个功能, ...

  5. python IDLE中反斜杠显示为人民币符号¥的解决办法

    改换英文字体即可

  6. 和为S的连续正数序列——牛客网(剑指offer)

    题目描述 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他 ...

  7. Java Collections API和泛型

    Java Collections API和泛型 数据结构和算法 学会一门编程语言,你可以写出一些可以工作的代码用计算机来解决一些问题,然而想要优雅而高效的解决问题,就要学习数据结构和算法了.当然对数据 ...

  8. Django 博客

    blogproject/blogproject/settings.py ## 其它配置代码... # 把英文改为中文 LANGUAGE_CODE = 'zh-hans' # 把国际时区改为中国时区 T ...

  9. 使用 PuTTY 从 Windows 连接到 Linux 实例

    启动您的实例之后,您可以连接到该实例,然后像使用您面前的计算机一样来使用它. Note 启动实例后,需要几分钟准备好实例,以便您能连接到实例.检查您的实例是否通过了状态检查 - 您可以在 Instan ...

  10. Flask 学习 五 电子邮件

    pip install mail from flask_mail import Mail # 邮件配置 app.config['MAIL_SERVER']='smtp.qq.com' app.conf ...