jQuery插件Tooltipster实现漂亮的工具提示

作者: 网络应用  发布:2019-09-06

Tooltipster是贰个轻量级的jQuery工具提醒插件,能够火速的帮扶您转移美丽的工具提醒。

1,加载jQuery和回顾Tooltipster的插件文件

在你下载Tooltipster,移动tooltipster.css和jquery.tooltipster.min.js到根的CSS和JavaScript的目录。接下来,加载jQuery和富含你的竹签里面Tooltipster的CSS和JavaScript文件:

<head> 
... 

  <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> 

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> 
  <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> 

... 
</head> 

2,设置你的HTML

为了Tooltipster职业,大家首先须要加多.tooltip类(或其余类型/采纳表示你想利用)的任何因素,大家希望有叁个工具提醒。接下来,我们将设置标题属性,无论大家期望大家的提醒说。上边是局部事例:
增多工具提示的图像:

复制代码 代码如下:

<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

加多工具提醒已经有一个类的链接:

复制代码 代码如下:

<a href="" class="ketchup tooltip" title="This is my link's tooltip message!">Link</a> 

增加工具提示一个div:

复制代码 代码如下:

<div class="tooltip" title="This is my div's tooltip message!"> 
    This div has a tooltip when you hover over it!
</div>

3,激活Tooltipster

小编们要做的尾声一件事正是激活插件。要到位那点,你的收尾</ head>前才加多下边包车型地铁台本标签(使用其余取舍你想 - 在这种气象下,大家使用的是.tooltip类):

<head> 
  ... 
  <script> 
    $(document).ready(function() { 
      $('.tooltip').tooltipster(); 
    }); 
  </script> 
</head> 

总结:

1.工具提示协助HTML标签内容

2.轻量级

3.灵活神速

4.体制订义简单,百分之百的CSS

5.支持3种主题

6.支持firefox,Chrome,IE7/8/9,Opera,Safari

如上所述正是本文的全部内容了,希望大家能够喜欢。

你恐怕感兴趣的稿子:

  • qTip2 精致的依附jQuery提醒音信插件
  • jQuery带箭头提醒框tooltips插件集锦
  • 编纂本人的jQuery提醒框(Tip)插件
  • jquery-tips悬浮提醒插件分享
  • jquery.cvtooltip.js 基于jquery的血泡提醒插件
  • 属于您的jQuery指示框(Tip)插件
  • 依照jQuery Tipso插件达成消息提醒框特效
  • jQuery音讯提醒框插件Tipso
  • poshytip 基于jquery的 插件 首要用以展现和讯人的图像和鼠标提醒等
  • jQuery tip提醒插件(实例分享)

本文由王中王开奖结果发布于网络应用,转载请注明出处:jQuery插件Tooltipster实现漂亮的工具提示

关键词:

上一篇:里的类数组对象
下一篇:没有了