You are here:   Home Extras Tooltips
Tooltips PDF Print E-mail

Developed for all our visitors.! Great new Tooltip class for Mootools 1.11 by amazing Mootools developer  Constantin Boiangiu .


 

 

 

Download Tooltips

Ultimate tooltip instructions:

To use with Joomla:

  • Download Joomla tooltips zip file
  • extract zip archive to folder tooltips
  • Read Joomla_Readme.html
 

For all you who never had experience with HTML, CSS and Javascript please read carefully it is very easy to follow. We will start from the simple tooltip use.

Please note that each tooltip to be displayed requires its own id. What is an ID ? ID or identifier is specific tag name that is assigned to any html tag by you. So let say you want to use YJ Tooltip on a simple text as shown above. First thing you need to know that this text " Simple text tooltip" is warped around p tag like this ;

<p>Simple text tooltip </p>

Like advised above , in order for our tooltips to work we need to give "p" element an ID. so we writte

<p id="simple">Simple text tooltip</p>

Now you need to insert some Javascript in order for this or any tooltip to work. Add this code just before </head> tag.  All parameters are defined and very easy to use.

This is default js use. Above example "regular ToolTip"

<script type="text/javascript">

window.addEvent('domready', function(){

new ToolTip({tipper:'regular', message:'This one is a regular tooltip. Mouse out and Poof! It is gone. Magic stuff (eat your heart out David Blaine).<br>Like the example above, it supports images and HTML.'});

});

</script>

This is default html use. Above example "regular ToolTip" 


<a id="regular" title="Normal ToolTip" href="#">regular ToolTip</a>

 

Here is tooltip class used on our frontpage intro images: Notice new class ToolTipClass:'YJrl'

<script type="text/javascript">

window.addEvent('domready', function(){

// Villa Demare intro image tooltip

new ToolTip({tipper:'delmare',ToolTipClass:'YJrl',fromTop:-250,fromLeft:200, message:'<img src="images/stories/villadelm.jpg" align="left" alt="" style="margin: 5px 5px 5px 0px;" width="80" height="60" />Contact us at +1555-655-3576 for more info or private tour.'});

});

</script>

This is html used 


<img style="margin: 0px;" height="160" width="665" title="Villa Del Mare" alt="Villa Del Mare" src="images/stories/g1.jpg" id="delmare" class="border" />

As you can see our friend Constantin gave us more than we asked for and here is the list of all parameters used. Just remember to separate them by comma " , " and you are ready to make your own tooltips.

 


  • tipper: ' ', // element Id displaying the tooltip
  • message:' ', // some predefined message . You can use HTML here
  • ajax:' ', // show message from ajax /enter your ajax page url here
  • ToolTipClass:'ToolTips', // tooltip display class. This way you can make your own
  • followMouse:false, // follow mouse on move
  • sticky:' ', // false or true to be used to display sticky type tooltip
  • fromTop: ' ', // distance from top mouse or object
  • fromLeft: ' ', // distance from left mouse or object
  • duration: ' ', // fade effect transition duration
  • fadeDistance: ' ' // the distance the tooltip starts fading in/out

NOTE: For valid XHTML place your tooltips in separate js file and call it in before </head> tag

Example:

<script type="text/javascript" src="src/mootools.js"></script>

<script type="text/javascript" src="src/ToolTip.js"></script>

<script type="text/javascript" src="src/tipstext.js"></script>

< Prev   Next >
 
Agent Login