• 会员中心
  • 当前位置:首页 > 资源 > 效果代码 >

    一个强大,灵活的jQuery插件使您能够轻松地创建增强CSS的强大的
    栏目分类:效果代码   发布日期:2015-09-02   浏览次数:

    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插件

    相关内容
       鲁ICP备14021093号 鲁B2-20140050   关于我们 | 广告合作 | 版权声明 | 意见反馈 | 联系方式 | 原创投稿 | 网站地图 |
    特效 教程 资源 资讯