I have a bunch of divs on my page and each of them has only the class attribute. In the divs there are some spans, which are set up to display a tooltip with the help of qTip.
The tooltip should contain three items:
My code so far:
<body>
<div class="OuterDiv">
<div class="InnerDiv">
<span class="Position">Position 1</span>
</div>
</div>
<div class="OuterDiv">
<div class="InnerDiv">
<span class="Position">Position 2</span>
</div>
</div>
</body>
And scripts:
$(document).ready(function () {
var qTipContent = '<a href="javascript:void(0)" onclick="">↑</a> ';
qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">↓</a> ';
qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">X</a>';
$('.Position').each(function () {
$(this).qtip({
content: qTipContent,
hide: {
fixed: true
}
})
});
});
How should the onclick
function in the qTip content look like?
My solution can be found at this jsFiddle - Besides cleaning up the qTipContent (was just really messy), the only real notable addition was adding ids to the anchors, and using the qTip api to add bindings to the click event for each anchor as the qTip window is added.
$('.Position').each(function(idx, elem) {
$(this).qtip({
content: qTipContent,
show: {
when: {
event: 'click'
}
},
hide: {
fixed: true,
when: {
event: "unfocus"
}
},
api: {
onRender: function() {
var $qtip = $(this.elements.content);
var odiv = $(elem).closest(".OuterDiv");
$("#up_arrow", $qtip).click(function() {
odiv.insertBefore(odiv.prev());
})
$("#down_arrow", $qtip).click(function() {
odiv.insertAfter(odiv.next());
})
$("#delete", $qtip).click(function() {
odiv.remove();
})
}
}
})
});