Tooltipster

1. Grab the tootipster files

Download the tooltipster files and add them to your resources.

2. Paste this code into the header box.

<link rel="stylesheet" type="text/css" href="tooltipster-master/css/tooltipster.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script type="text/javascript" src="tooltipster-master/js/jquery.tooltipster.min.js"></script>
<script>

$(document).ready(function() {
$('#tooltip1').tooltipster({
content: $('<span><img src="tooltipster-master/images/pumpkin-thumb.png" /><strong>This has text and an image</strong></span>')
});
// Keep adding targeting scripts with unque ID's
});
</script>

Next go to the elements that you would like a tooltip on and add the ID that matches the target to them.

I added an image using the image element in RSD and gave it an ID of tooltip2

<script>
$(document).ready(function() {
$('#tooltip2').tooltipster({
content: $('<span><strong style="color:white;">This is the rare toottip flower</strong></span>')
});
});
</script>

Here's the targeting scripts all together.

<script>
$(document).ready(function() {
$('#tooltip1').tooltipster({
content: $('<span><img src="tooltipster-master/images/pumpkin-thumb.png" /> <strong>This has text and an image</strong></span>')
});
$('#tooltip2').tooltipster({
content: $('<span><strong style="color:white;">This is the rare toottip flower</strong></span>')
});
});
</script>

Here's the targeting scripts for an image and a heading having text only tooltips. The image has an ID of tooltip3 and the heading has an ID of tooltip4

Heading Level 5

<script>
$(document).ready(function() {
$('#tooltip3').tooltipster({
content: $('<span><strong style="color:yellow;">Tooltip text on an image</strong></span>')
});
$('#tooltip4').tooltipster({
content: $('<span><strong style="color:white;">Tooltip on text</strong></span>')
});
});
</script>