设为首页 - 加入收藏
广告 1000x90
您的当前位置:主页 > 幸运飞艇官网 > 效果代码 > 正文

一个强大,灵活的jQuery插件使您能够轻松地创建增强CSS的强大的

来源:未知 编辑:admin 时间:2015-09-02
一个强大,灵活的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> 

相关文章:

相关推荐:

网友评论:

模板天下 www.mobantianxia.com 联系QQ:498872301 邮箱:[email protected]

Copyright © 2002-2011 DEDECMS. 织梦科技 版权所有 Power by DedeCms

Top