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. python提示import XX 不存在,如何排查错误

    1.如何确定文件夹是一个包, 检查包中是否有__init__.py 文件, 在python模块的每一个包中,都有一个__init__.py文件(这个文件定义了包的属性和方法)然后是一些模块文件和子目录 ...

  2. 关于yaml语言

    yaml语言广泛用于书写配置文件. 主要特点如下: 1.使用缩进表示层级关系,缩进使用空格键(非Tab键) 2.缩进的空格数目不要求,只要相同层级的元素左侧对其即可 3.#之后的内容为注释 4.yam ...

  3. 【Alpha】随笔集合

    Daily Scrum Meeting 第一天 [Alpha]Daily Scrum Meeting第一次 第二天 [Alpha]Daily Scrum Meeting第二次 第三天 [Alpha]D ...

  4. beta冲刺2-咸鱼

    q前言:今天晚上大概把github的的相关东西弄上了.然后把之前做的一些修改什么的也上传上去了.目测之后的话就是在自己这边改完然后直接上github那边去复制粘贴替换掉了. 昨天的问题:github这 ...

  5. 【Alpha版本】冲刺阶段 - Day4 - 加速

    今日进展 袁逸灏:实现音乐的播放.(5h) 启动类,游戏画面类(修改类) 刘伟康:继续借鉴其他 alpha 冲刺博客,了解了Android方面的部分内容,便于更好地推进进度.(2h) 刘先润:更新图画 ...

  6. Alpha冲刺集合

    Alpha冲刺集合 Day1 http://www.cnblogs.com/bugLoser/p/7901016.html Day2 http://www.cnblogs.com/bugLoser/p ...

  7. DNS协议(一)

    在互联网上要想与另外一台主机通信,要知道对方的IP地址,但是IP地址是很难记忆的, 比如百度的一台服务器的IP地址为115.239.210.27,我们在浏览器中输入http://115.239.210 ...

  8. 201621123043 《Java程序设计》第6周学习总结

    1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖面向对象的 ...

  9. 同一个页面同时拥有collectionView和navigationBar和tabBar时可能遇到的问题

    写一个页面的时候,遇到了页面加载时候collectionView的最下面少了49个像素的位置,切换去别的页面之后,再返回,又变回正常,多方求解无果后,发现原来是系统自带的适应功能导致的,加入以下代码即 ...

  10. redis命令详解

      redis中添加key value元素:set key value;       获取元素:get key ;   redis中添加集合:lpush key value1 value2 value ...