jquery qtip提示插件 简单用法

导入jquery及qtip的js
    <link rel="stylesheet" type="text/css" href="js/jquery.qtip.min.css"/>
    <script     type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.qtip.min.js"></script>
html代码
    <div id="myDiv">
   <a>qtip</a>
    </div>
js代码
    $(function (){
  $("#myDiv a").each(function(){
     $(this).qtip({
  content: {
     text: "qtip is so good"
          },
  overwrite: true,
  style: {
  classes: 'ui-tooltip-navyBlue ui-tooltip-shadow ui-tooltip-rounded'
  },
  position: {
  //target: 'mouse',
  at: 'bottom left',
  viewport: true,
  adjust: { mouse: false },
  viewport: $(window)
  },
  hide: {
  delay: 300,
  //event: 'mouseleave',
  fixed: true,
  effect: function() {
  $(this).slideUp();
  }
  }
});
  });
});
效果展示



猜你喜欢

转载自1141338892.iteye.com/blog/2307976
今日推荐