Component overview < BioJs

PLEASE NOTE: the above example is being affected by the CSS rules of this site. Click on 'view in window' to see the component by using its own CSS stylesheet(s) only.

View in window

Overview

Tooltip for general purpose.
Version 1.0.0.

To get the above Biojs.Tooltip to work on your page, you need to do the following:

Include the file Biojs.Tooltip.js and its dependencies to your page header.

Biojs scripts

<script language="JavaScript" type="text/javascript" src="src/Biojs.js">

External script(s)

<script language="JavaScript" type="text/javascript" src="../biojs/dependencies/jquery/jquery-1.6.4.js">

CSS stylesheet(s)

<link href="../biojs/css/biojs.Tooltip.css" rel="stylesheet" type="text/css">

Create a div tag which holds an unique identifier.

                                <body>
                                ...
                                <div id="YourOwnDivId" />
                                ...
                                </body>

Create a code snippet within a <script> tag and instance Biojs.Tooltip into.

window.onload = function() {
   // These examples use the component's example div 'YourOwnDivId' to draw the links only.
   jQuery('#YourOwnDivId')
      .append('Pass the mouse over here.')
      .css({ 
         'display': 'table-cell',
         'vertical-align': 'middle',
         'text-align': 'center',
         'width': '730px',
         'height': '400px'
      });
   
   // Tooltip will come out whenever mouse enter to any anchor 'a' with class 'example'
   var simpleTip = new Biojs.Tooltip({
      targetSelector: "a.example"
   });
   
   //
   // Another example using rendering function instead of 'title' attribute
   //
   jQuery('#YourOwnDivId')
      .append('



This example change the tooltip direction 
 for each mouse entry.');
   
   // Tooltip will come out whenever mouse enter to any anchor 'a' with class 'example'
   var tipRendered = new Biojs.Tooltip({
      targetSelector: "a.example.render",
      cbRender: function( element ) {
      	return "Tooltip type Biojs.Tooltip.ARROW_" + this.getArrowType().toUpperCase() + " using rendering function to build up content dynamically"
      }
   });
   
   // Changes the tooltip's direction 
   var counter = 0;
   var arrowTypes = [ 
      Biojs.Tooltip.ARROW_LEFT_TOP,
   	 Biojs.Tooltip.ARROW_LEFT_MIDDLE,
      Biojs.Tooltip.ARROW_LEFT_BOTTOM,
      Biojs.Tooltip.ARROW_TOP_LEFT,
      Biojs.Tooltip.ARROW_TOP_MIDDLE,
      Biojs.Tooltip.ARROW_TOP_RIGHT,
      Biojs.Tooltip.ARROW_RIGHT_TOP,
      Biojs.Tooltip.ARROW_RIGHT_MIDDLE,
      Biojs.Tooltip.ARROW_RIGHT_BOTTOM,
      Biojs.Tooltip.ARROW_BOTTOM_LEFT,
      Biojs.Tooltip.ARROW_BOTTOM_MIDDLE,
      Biojs.Tooltip.ARROW_BOTTOM_RIGHT
   ];
   
   // Changes the Tooltip arrow type dynamically 
   jQuery('#YourOwnDivId a.example.render').mouseover( function() {
   	 var arrowType = arrowTypes[ counter++ % 12 ];
      tipRendered.setArrowType( arrowType );
   });
   
   //
   // Another example using rich content 
   //
   jQuery('#YourOwnDivId')
      .append('



Rich content');
      
   var richContent = 
      ''+
      'Santiago de Cali' +
      ''+
      ' '+
      'Simply referred to as Cali, is a city located in western Colombia '+
      'It is the capital of the Valle del Cauca Department. With a population of 2.5 million, '+
      'Cali is the third largest city in the country, after Bogota and Medellin. The city '+
      'was founded on 25 July 1536.';
   
   var tipRich = new Biojs.Tooltip({
      targetSelector: "a.example.rich",
      cbRender: function( element ) {
      	return richContent;
      }, 
      arrowType: Biojs.Tooltip.ARROW_BOTTOM_MIDDLE
   });
   
   //
   // Last example using mouse position instead of element's 
   //
   jQuery('#YourOwnDivId')
      .append('



Tooltip changes with mouse positioning.');
   
   var tipPosition = new Biojs.Tooltip({
      targetSelector: "a.example.position",
      position: Biojs.Tooltip.MOUSE_POSITION
   });

};

onShowUp

Parameters:

{function} actionPerformed
A function which receives an Biojs.Event object as argument.

Returned data in the Biojs.Event object:

{Object} source
The component which did triggered the event.
{string} type
The name of the event.
{string} target
Target element.

Example :

simpleTip.onShowUp(
   function( e ) {
      alert("Mouse has passed over the first example.");
   }
);

Returned data in the Biojs.Event object:

Example :

Biojs.Tooltip showcase

Overview

Biojs scripts

External script(s)

CSS stylesheet(s)

Required Parameters

Optional Parameters

getArrowType

Parameters:

Example :

Returns:

getIdentifier

Example :

Returns:

setArrowType

Parameters:

Example :

setIdentifier

Parameters:

Example :

onShowUp

Parameters: