RapidWeaver FAQ - Tooltips 2
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)
Page 2: Using ToolTip MooTools (currently visiting)
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 “tooltips2”
2. Upload the “tooltips2” 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 rel="stylesheet" href="/tooltips2/tooltip.css.php" type="text/css" />
<script type="text/javascript" src="/tooltips2/mootools.js"></script>
<script type="text/javascript" src="/tooltips2/tooltip.js"></script>
<style type="text/css">
<!--
span.info {
display: block;
padding: 1px;
margin-bottom: 1px;
background-color: #FFFFCC;
border: 1px solid #d8d7d7;
color: #000;
}
-->
</style>
5. In RapidWeaver where you want the text link tooltip or thumbnail (image) tooltip to appear paste the following code (choose one).
Text:
<div id="tooltip-1" class="tooltip-toggler">Link title</div>
<script type="text/javascript">new ToolTip('tooltip-1', '<strong><span style="color:black">Tooltip title</span></strong><br /><span class="info">Content of the tooltip</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script>
Replace:
tooltip-1: if you have multiple tooltips you need to change to tooltip-2 for the second tooltip-3 for the third and so on (note that you need to change it twice per code)
Tooltip title: The title that displays on the tooltip
Tooltip content: The content of the tooltip
Link title: Is the name of the link that will display on the page and show the tooltip on hover
width: you can change the width of the tooltip by increasing or decreasing the number of pixel (default is 250)
<div id="tooltip-1" class="tooltip-toggler">www.rapidweaverfaq.org</div>
<script type="text/javascript">new ToolTip('tooltip-1', '<strong><span style="color:black">RapidWeaverFAQ.org</span></strong><br /><span class="info">The best source of Tutorials, Tips & Tricks about RapidWeaver</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script>
Text Link:
<a id="tooltip-2" class="tooltip-toggler" href="URL of the link" target=”_blank”>Link title</a>
<script type="text/javascript">new ToolTip('tooltip-2', '<strong><span style="color:black">Tooltip title</span></strong><br /><span class="info">Content of the tooltip</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script>
Again you need to choose title, content as described above. In addition to that you need to change the URL of the link.
<a id="tooltip-2" class="tooltip-toggler" href="http://rapidweaverfaq.org" target=”_blank”>www.rapidweaverfaq.org</a>
<script type="text/javascript">new ToolTip('tooltip-2', '<strong><span style="color:black">RapidWeaverFAQ.org</span></strong><br /><span class="info">The best source of Tutorials, Tips & Tricks about RapidWeaver</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script>
www.rapidweaverfaq.org
Thumbnail:
<div id="tooltip-3" class="tooltip-toggler"><img src="URL of the image"></div>
<script type="text/javascript">new ToolTip('tooltip-3', '<strong><span style="color:black">Tooltip title</span></strong><br /><span class="info">Content of the tooltip</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script>
Again you need to choose title, content, URL of the link 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.
<div id="tooltip-3" class="tooltip-toggler"><img src="http://rapidweaverfaq.org/media/rwfaq-minilogo.jpg"></div>
<script type="text/javascript">new ToolTip('tooltip-3', '<strong><span style="color:black">RapidWeaverFAQ.org</span></strong><br /><span class="info">The best source of Tutorials, Tips & Tricks about RapidWeaver</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script>
Thumbnail Link:
<a id="tooltip-4" class="tooltip-toggler" href="URL of the link" target=”_blank”><img src="URL of the image"></a>
<script type="text/javascript">new ToolTip('tooltip-4', '<strong><span style="color:black">Tooltip title</span></strong><br /><span class="info">Content of the tooltip</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script>
Again you need to choose title, content, URL of the link 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.
<a id="tooltip-4" class="tooltip-toggler" href="http://rapidweaverfaq.org" target=”_blank”><img src="http://rapidweaverfaq.org/media/rwfaq-minilogo.jpg"></a>
<script type="text/javascript">new ToolTip('tooltip-4', '<strong><span style="color:black">RapidWeaverFAQ.org</span></strong><br /><span class="info">The best source of Tutorials, Tips & Tricks about RapidWeaver</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script>
Further notes: in the Tooltip you can put every html code you’d like. Even Flash content! Look at that...
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 -
