I am using Jquery 1.4.4 with Qtip and i am trying to load an image for each individual list item, so i am using Content: URL:.attr(rel), but it wont load the url of the REL
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() {
$('ul.list-one li a[href]').each(function(){
$(this).qtip({
Content: { url: $(this).attr('rel') },
position: {
corner: {
target: 'topMiddle',
tooltip: 'bottomMiddle'
开发者_如何学运维 }
},
style: {
tip: 'bottomMiddle',
border: { width: 2, radius: 2, color: '#A9D041' },
background: '#fff',
padding:0,
width: 175,
height:100
}
});
});
});
</script>
<ul class="list-one">
<li class="header">Project Management</li>
<li><a href="#">BGC Bremerholm</a></li>
<li><a href="#">Medtronic</a></li>
<li><a href="#">Straumur - Burdaras Bank</a></li>
<li><a href="#">Straumur Reykjavik</a></li>
<li><a href="#">Straumur Stockholm</a></li>
<li><a rel="/test/test.html" href="#">T. Rowe Price</a></li>
</ul>
You can simply use each from jquery to get all elements and aply qtip to them. You can easily manipulate them in this way.
$('.qtip').each(function(){
$(this).qtip({
content: { url: $(this).attr('rel'), method: 'get' },
style: {
padding: '7px 13px',
width: {
max: 510,
min: 0
},
tip: true
}
});
});
Content should be a lowercase c
content: { url: $(this).attr('rel') },
goetz, the document.ready() function means you don't need to put it at the bottom of the page, it waits for the page to load before firing.
I used this for a recent project and it works just fine :)
$('.test').each(function(){
$(this).qtip({
content: { text: '<img src="' + $(this).attr('href') + '" />' },
show: { delay: 0 },
});
});
精彩评论