RapidWeaver FAQ - Tooltips
Is it possible to create the mouseover 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 (currently visiting): Using Tips (mootools)
Page 2: Using ToolTip MooTools
Page 3: Standard tooltips
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)
6. First we need to put some code into the tags of the page where we want to insert the Tooltips to.
7. To do this go to Page Info => Header => Header and paste the following code into the previously mentioned field:
<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>
8. In RapidWeaver 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="RapidWeaverFAQ.org :: The best source of Tutorials, Tips & Tricks about RapidWeaver" href="http://rapidweaverfaq.org" target=”_blank”>www.rapidweaverfaq.org</A>
Tips1 (instant)
www.rapidweaverfaq.org
Tips2 (fades in and out)
www.rapidweaverfaq.org
Tips3 (displays under the pointer instead of on the side as 1 and 2 do)
www.rapidweaverfaq.org
Tips4 (different style)
www.rapidweaverfaq.org
Thumbnail:
<IMG class=TipsNumber title="Tooltip title :: Tooltip content" alt=mooCow 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="RapidWeaverFAQ.org :: The best source of Tutorials, Tips & Tricks about RapidWeaver" alt=mooCow src="http://rapidweaverfaq.org/media/rwfaq-minilogo.jpg">
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="RapidWeaverFAQ.org :: The best source of Tutorials, Tips & Tricks about RapidWeaver" href="http://rapidweaverfaq.org" target=”_blank”><img src="http://rapidweaverfaq.org/media/rwfaq-minilogo.jpg"></A>
9. Publish the website.
RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
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 -