当前位置:首页 > 资源 > 效果代码 > 正文

一个强大,灵活的jQuery插件使您能够轻松地创建增强CSS的强大的语义,现代的工具提示
栏目分类:效果代码   发布日期:2014-09-11   来源:   浏览次数:

1,加载jQuery和包括Tooltipster的插件文件在您下载Tooltipster,移动tooltipster css和jquery tooltipster min js到根的CSS和JavaScript的目录。接下来,加载jQuery和包括您的标签里面Tooltipster的CSS和JavaSc
一个强大,灵活的jQuery插件使您能够轻松地创建增强CSS的强大的语义,现代的工具提示
 
1,加载jQuery和包括Tooltipster的插件文件
在您下载Tooltipster移动tooltipster.cssjquery.tooltipster.min.js到根CSS和JavaScript的目录。接下来,加载jQuery和包括您的标签里面TooltipsterCSS和JavaScript文件
  1. <head> 
  2. ... 
  3.  
  4.     <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> 
  5.  
  6.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> 
  7.     <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> 
  8.  
  9. ... 
  10. </head> 

2,设置你的HTML
为了Tooltipster工作我们首先需要添加.tooltip(或任何类别/选择意味着你想使用的任何元素,我们希望有一个工具提示接下来,我们将设置标题属性,无论我们希望我们的提示下面是一些例子
添加工具提示的图像

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

添加工具提示已经有一个类的链接:

  1. <a href="http://calebjacob.com" class="ketchup tooltip" title="This is my link's tooltip message!">Link</a>  

添加工具提示一个div

  1. <div class="tooltip" title="This is my div's tooltip message!">  
  2.     This div has a tooltip when you hover over it! 
  3. </div> 
3,激活Tooltipster
我们要做的最后一件事就是激活插件要做到这一点,你的结束</ head>前才添加下面的脚本标签使用任何选择你想 - 在这种情况下,我们使用的是.tooltip
  1. <head> 
  2.  
  3.     ... 
  4.  
  5.     <script> 
  6.         $(document).ready(function() { 
  7.             $('.tooltip').tooltipster(); 
  8.         }); 
  9.     </script> 
  10. </head> 

相关热词:jQuery插件

Copyright © 2014 聚合分享 版权所有   京ICP备14037269号-1  关于聚合分享 | 广告合作 | 版权声明 | 意见反馈 | 联系方式 | 原创投稿 | 网站地图 | 友情链接
常用软件效果代码设计理论技术文章