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.
Visit the Plugins FAQ for more informations.
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
<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></head>
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:
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
Tips1 (instant)
Tips2 (fades in and out)
Tips3 (displays under the pointer instead of on the side as 1 and 2 do)
Tips4 (different style)
Thumbnail:
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.
Thumbnail-Link:
Again you need to choose a style, title, content, url of the image and url of the link as described above.
7. That’s it.
WordPressFAQ.org – Tutorials, Tips & Tricks is made with and for WordPress.
It’s presented by Cédric and hosted by HostExcellence.com
I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it’s been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.
Thank you for visiting and supporting my website.
- Cédric -
