Is it possible to create the mouseover/rollover/hover effect... When the mouse is hovering over a photo or a link text pops up indicating that its a link and when the mouse is pulled off the photo or link the text goes away?

This effect is called Tooltips.

Page 1: Using Tips MooTools (currently visiting)
Page 2: Using ToolTip MooTools
Page 3: Standard tooltips

Page 1: Using Tips MooTools

And here you find how to add them...

1. Click here to download the needed files.
2. You will get a folder “Tips”
3. Rename the folder “tooltips1”
4. Upload the “tooltips1” folder to the root location of your server (most top level)
5. Go to the post you want to insert the Tooltips to and post the following code to the top of it

<LINK media=screen href="/tooltips1/style(1).css" type=text/css rel=stylesheet>

<SCRIPT src="/tooltips1/mootools.svn.js"
type=text/javascript></SCRIPT>

<SCRIPT src="/tooltips1/demos.js"
type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
window.addEvent('domready', function(){
/* Tips 1 */
var Tips1 = new Tips($$('.Tips1'));

/* Tips 2 */
var Tips2 = new Tips($$('.Tips2'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});

/* Tips 3 */
var Tips3 = new Tips($$('.Tips3'), {
showDelay: 400,
hideDelay: 400,
fixed: true
});

/* Tips 4 */
var Tips4 = new Tips($$('.Tips4'), {
className: 'custom'
});
});
</SCRIPT>

6. Where you want the text link tooltip or thumbnail (image) tooltip to appear paste the following code (choose one):

Text Link:

There are different styles, in general:

<A class="TipsNumber" title="Tooltip title :: Tooltip content" href="URL of the link" target=”_blank”>Link title</A>

Replace:

TipsNumber: with Tips1, Tips2, Tips3 or Tips4 define the style
Tooltip title: The title that displays on the tooltip
Tooltip content: The content of the tooltip
URL of the link: The web address the link should point to
target=”_blank” opens the link in a new window if you want it to open in the same window change _blank to _top
Link title: Is the name of the link that will display on the page

<A class="Tips1" title="WPFAQ.org :: The best source of Tutorials, Tips & Tricks about WordPress" href="http://wpfaq.org" target="_blank">www.wpfaq.org</A>

Tips1 (instant)

www.wpfaq.org

Tips2 (fades in and out)

www.wpfaq.org

Tips3 (displays under the pointer instead of on the side as 1 and 2 do)

www.wpfaq.org

Tips4 (different style)

www.wpfaq.org

Thumbnail:

<IMG class="TipsNumber" title="Tooltip title :: Tooltip content" src="URL of the image">

Again you need to choose a style, title, content as described above. In addition to that you need to replace URL of the image with the web address of the thumbnail you want to display.

<IMG class="Tips1" title="WPFAQ.org :: The best source of Tutorials, Tips & Tricks about WordPress" src="http://wpfaq.org/media/WPminilogored.png">

Thumbnail-Link:

<A class="TipsNumber" title="Tooltip title :: Tooltip content" href="URL of the link" target="_blank"><img src="URL of the image"></A>

Again you need to choose a style, title, content, url of the image and url of the link as described above.

<A class="Tips1" title="WPFAQ.org :: The best source of Tutorials, Tips & Tricks about WordPress" href="http://wpfaq.org" target="_blank"><img src="http://wpfaq.org/media/WPminilogored.png"></A>

7. That’s it.