效果图如下:
当手鼠标触摸到右边的小问题时就会弹出下面的对话框:
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();
}
}
});