Tooltips 2

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

Page 2: Using ToolTip MooTools

And here you find how to add them...

1. Click here to download the needed files.
2. You will get a folder “tooltip”
3. Rename the folder “tooltips2”
4. Upload the “tooltips2” 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 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>

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

Text:

www.wpfaq.org

<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.wpfaq.org</div>
<script type="text/javascript">new ToolTip('tooltip-1', '<strong><span style="color:black"> WPFAQ.org</span></strong><br /><span class="info">The best source of Tutorials, Tips & Tricks about WordPress</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script>

Text Link:

www.wpfaq.org

<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://wpfaq.org" target=”_blank”>www.wpfaq.org</a>
<script type="text/javascript">new ToolTip('tooltip-2', '<strong><span style="color:black">WPFAQ.org</span></strong><br /><span class="info">The best source of Tutorials, Tips & Tricks about WordPress</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script>

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://wpfaq.org/media/WPminilogored.png"></div>
<script type="text/javascript">new ToolTip('tooltip-3', '<strong><span style="color:black">WPFAQ.org</span></strong><br /><span class="info">The best source of Tutorials, Tips & Tricks about WordPress</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://wpfaq.org" target=”_blank”><img src="/media/WPminilogored.png"></a>
<script type="text/javascript">new ToolTip('tooltip-4', '<strong><span style="color:black">WPFAQ.org</span></strong><br /><span class="info">The best source of Tutorials, Tips & Tricks about WordPress</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!

Hover here!

That’s it.


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


© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
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

Comments are closed.