RapidWeaver FAQ - Tooltips







Share/Bookmark


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: Using Tips (mootools) (currently visiting)
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. You will get a folder named “tooltips1”.
2. Upload the “tooltips1” folder to the root location of your server (most top level)
3. First we need to put some code into the tags of the page where we want to insert the Tooltips to.
4. 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>



5. 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">



mooCow


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>





6. Publish the website.



This FAQ is also discussed in my RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -


Now share it…

Share