jquery的Tooltip插件 qtip使用详细说明

2020-05-16 18:44:23易采站长站整理

var%20opposites%20=%20’topRight’;%20
$(document).ready(function()%20
{%20
$(‘#content%20a’)%20
.hover(function()%20
{%20
$(this).html(opposites)%20
.qtip({%20
content:%20corners,%20
position:%20{%20
corner:%20{%20
tooltip:%20corners,%20
target:%20opposites%20
}%20
},%20
show:%20{%20
when:%20false,%20
ready:%20true%20
},%20
hide:%20false,%20
style:%20{%20
border:%20{%20
width:%205,%20
radius:%2010%20
},%20
padding:%2010,%20
textAlign:%20’center’,%20
tip:%20true,%20
name:%20’cream’%20
}%20
});%20
});%20
});%20
</script>%20
%20
效果如图所示:%20

5、Fixed%20tooltips%20

html如下所示:%20
%20%20
<div%20id=”content”>%20
<img%20src=”sample.jpg”%20alt=””%20height=”200″%20/>%20
</div>%20
%20
JS代码:%20
%20%20
<script%20type=”text/javascript”>%20
$(document).ready(function()%20
{%20
$(‘#content%20img’).each(function()%20
{%20
$(this).qtip(%20
{%20
content:%20′<a%20href=”%20″>Edit</a>%20|%20<a%20href=”%20″>Delete</a>’,%20
position:%20’topRight’,%20
hide:%20{%20
fixed:%20true%20
},%20
style:%20{%20
padding:%20’5px%2015px’,%20
name:%20’cream’%20
}%20
});%20
});%20
});%20
</script>%20
%20
css代码:%20
%20%20
<style%20type=”text/css”>%20
#content%20img{%20
float:%20left;%20
margin-right:%2035px;%20
border:%202px%20solid%20#454545;%20
padding:%201px;%20
}%20
</style>%20
%20
效果如图所示:%20

6、Loading%20html%20

html如下所示:%20
%20%20
<div%20id=”content”>%20
<a%20href=”#”%20rel=”sample.html”>Click%20me</a>%20
</div>%20
%20
JS代码:%20
%20%20
Js代码%20
<script%20type=”text/javascript”>%20
$(document).ready(function()%20
{%20
$(‘#content%20a[rel]’).each(function()%20
{%20
$(this).qtip(%20
{%20
content:%20{%20
url:%20$(this).attr(‘rel’),%20
title:%20{%20
text:%20’Wiki%20-%20’%20+%20$(this).text(),%20
button:%20’Close’%20
}%20
},%20
position:%20{%20
corner:%20{%20
target:%20’bottomMiddle’,%20
tooltip:%20’topMiddle’%20
},%20
adjust:%20{%20
screen:%20true%20
}%20
},%20
show:%20{%20
when:%20’click’,%20
solo:%20true%20
},%20
hide:%20’unfocus’,%20
style:%20{%20
tip:%20true,%20
border:%20{%20