jQuery工具提示插件qTip

效果图如下：

     当手鼠标触摸到右边的小问题时就会弹出下面的对话框：

 

html代码如下：

 

<li class="borderbottom_double">

                    <span class="mian_step2_main_title"><fmt:message key="app.icon"/></span>

                        <span class="essentialword">*</span>

 

                        <img alt="The icon will be used for your app and will be displayed in the appstores." 

                                         altImg="${ctx}/images/appcreate/prompt_pic.png"

                          qtipWidth="485" qtid="scr_adsense_dimensions" 

                          class="qtipWithImg" src="${ctx}/images/appcreate/help_icon.png" style="float:right;"/>

                    </li>

 

 

js代码如下：

要用jquery 1.4以上的版本，并且用/js/jquery.qtip-1.0.0-rc3.min.js(不过目前已经有2的版本了)

 

 

$('.qtipWithImg').qtip({

 

   content: 'Loading.......................',

    position: {

        corner: {

           tooltip: 'topRight',

           target: 'bottomRight'

        },

        adjust: {

           resize: true,

           scroll: true

        }

     },

     style: {

        name: 'light',

        textAlign: 'left',

        width: 485, 

        tip: true 

     },

     api: {

           beforeShow: function(){

         $('#SWFUpload_0').hide();

              var self = this;

              var message = self.elements.target.attr("alt");

              var image=  self.elements.target.attr("altImg");

              var _width = self.elements.target.attr("qtipWidth");

              if(_width !=null && !isNaN(_width)) {

              self.updateWidth(parseInt(_width));

          }

              var  tipMsg = '<span style="font-size:12px; color:#787878;font-weight:700;">'+message+'</span> <br/><br/> <img src="'+image+'" alt="Image"/>'

          self.updateContent(tipMsg);

              

           },

           beforeHide: function()  

           {  

            $('#SWFUpload_0').show();

           }  

        }

 });