1) You can use the same image for both the question and the tooltip but, in my opinion, this is sub-optimal because you would need to reduce the size for display in the question with HTML attributes. This does not give as good results as resizing/resampling the image properly with Fireworks, Photoshop or other software.
To do this you would need to add height and width attributes to the image tags in your question:
<img src="upload/surveys/11111/image1.jpg" width="200" height="150" id="smallImage" src="upload/surveys/11111/image1.jpg" />
and then use something like this JavaScript:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply tooltip to images
$('#smallImage').tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
return $("<img/>").attr("src", this.src);
}
});
});
</script>
2) I'm afraid I don't have time to test the performance or positioning capabilities of the different tooltip plugins. You will have to experiment and come to your own decision. I still believe that a lightbox plugin may suit your nees better (you can disable the next/previous and slideshow functionality).
3) The qTip plugin is already installed, all you need to do is reference it in startpage.pstpl:
<script src="scripts/jquery/jquery.qtip.js" type="text/javascript"></script>
and then use JavaScript like this (this is not tested but details are at the
qTip site):
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply tooltip to images
$('#image1').qtip({
content: '<img src="upload/surveys/11111/image1.jpg" />'
});
$('#image2').qtip({
content: '<img src="upload/surveys/11111/image2.jpg" />'
});
});
</script>
