纯CSS功能齐全的Tooltip工具提示插件 - JQuery/js插件 - 科蚁网
请选择 进入手机版 | 继续访问电脑版

纯CSS功能齐全的Tooltip工具提示插件

[复制链接]
科蚁网小编 发表于 2015-7-7 15:28:23 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
JQuery/js插件信息(点击图片可以放大)
科蚁网发布的资源,版权归原作者所有,仅供学习交流,请勿用于商业用途。

应用终端: 传统PC 

资源级别: 免费资源

素材来源: 网络收集

推荐等级: ★★★★★

兼容浏览器: IE9 IE10 IE11 谷歌 火狐 欧朋 Safari 360 搜狗 

 

科蚁网温馨提示 1、本版块发布的JQuery/js插件均来自互联网,版权归原作者所有,科蚁网仅为存储空间。
2、科蚁网资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
3、如有侵犯您的版权,请及时联系2054226023#qq.com(#换@),我们将尽快做删除处理。
4、如果您发现科蚁网资源无法下载或链接失效或其他关于科蚁网站的问题,请到 站务中心区 发帖,我们将及时处理。

马上注册成为科蚁网会员,即可免费下载和分享手机建站资源!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

文件名:纯CSS功能齐全的Tooltip工具提示插件 
下载次数:3    下载所需积分:5 枚资源币
下载权限: 新手上路  [如何获取资源币]   [科蚁币]  可 [兑换资源币]  


代码:
  1. </div>
  2.                 </header>
  3.                 <div class="htmleaf-content bgcolor-3">
  4.                         <h3>Hint.css - 纯CSS Tooltip工具库</h3>
  5.                         <p>
  6.                                 <a href="#" class="hint--top" data-hint="Yeah, I am >:D">鼠标滑过来看看,tooltip会出现在我的上方!</a>
  7.                         </p>

  8.                         <p>
  9.                                 <a href="#" class="hint--right" data-hint="Are you sure you are?">Tooltip总是出现在我的右边。</a>
  10.                         </p>

  11.                         <p>
  12.                                 <a href="#" class="hint--bottom" data-hint="Sure. Cheers!">这次是出现在我的下方。</a>
  13.                         </p>

  14.                         <p>
  15.                                 <a href="#" class="hint--left" data-hint="LEFT-over Sir...">当然,tooltip也可以出现在我的左边!</a>
  16.                         </p>


  17.                         <p><a class="hint--right" data-hint="Made by Kushagra Gour" target="_blank" href="#"><img  src="img/pikachu.png"></a>
  18.                         </p>

  19.                         <p>
  20.                                 <a class="hint--top  hint--error" data-hint="This is an error tooltip">看看颜色,我现在变成了红色。。。</a>
  21.                         </p>

  22.                         <p>
  23.                                 <a class="hint--left  hint--warning" data-hint="This is a warning tooltip">一转身有变成了黄色!</a>
  24.                         </p>

  25.                         <p>
  26.                                 <a class="hint--right  hint--info" data-hint="This is an info tooltip">这一次是蓝色!</a>
  27.                         </p>

  28.                         <p>
  29.                                 <a class="hint--bottom  hint--success" data-hint="This is a success tooltip">再变!绿色来了。。。</a>
  30.                         </p>

  31.                         <h3>Extra</h3>

  32.                         <p>
  33.                                 <a class="hint--left  hint--always" data-hint="...which always keep showing">你也可以使 tooltips 一直出现...</a>
  34.                         </p>

  35.                         <p>
  36.                                 <a class="hint--top  hint--rounded" data-hint="We have rounded corners for you">你不喜欢直角矩形,Tooltip也可以是圆角的!</a>
  37.                         </p>

  38.                         <h3>Effects</h3>

  39.                         <p>
  40.                                 <a class="hint--top  hint--no-animate" data-hint="Get a simple show/hide tooltip">不喜欢动画效果?</a>
  41.                         </p>
  42.                         <p>
  43.                                 <a class="hint--right  hint--bounce" data-hint="Bounce Effect">添加一个 <code>hint--bounce</code> class 来制作一点动画效果。。。</a>
  44.                         </p>
  45.                 </div>
  46.         </div>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则