query qtip demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script> 


  <script type="text/javascript">   
  $(document).ready(function()   
  {   



   $('input[name="month"]').qtip({
   content: 'Presets, presets and more presets. Let\'s spice it up a little with our own style!',
   style: { 
      width: 200,
      padding: 5,
      background: '#A2D959',
      color: 'black',
      textAlign: 'center',
      border: {
         width: 7,
         radius: 0,
         color: '#A2D959'
      },
      tip: 'topMiddle',
      name: 'blue' // Inherit the rest of the attributes from the preset dark style
   },
    position: {
      corner: {
         target: 'bottomMiddle',
         tooltip: 'topMiddle'
      }
   },
   show: 'focus',   
   hide: 'unfocus'

});
  });   
</script>  



 </head>

 <body>
  <div id="content">  
  <a href=" " rel="modal">Basic text</a>  
  <input id="month" type="text" name="month">
</div>  

<div id="content">
  <a href=" ">Basic text</a>
</div> 


 </body>
</html>



其中qtip是表示箭头指向

你可能感兴趣的:(query)